很难在网格单元中显示数字

Question

我正在尝试制作交互式数独求解器，我设法制作了一个由不同元素组成的网格，这些网格代表一个空的数独网格。但是，当我尝试在网格单元格中实际显示任何数字时，我感到很短。https://jsfiddle.net/retsek860/w98fr42v/

function createGrid() {
    for (var rows = 0; rows < 9; rows++) {
        for (var columns = 0; columns < 9; columns++) {
            cell = "<div class='grid' "
            if (rows%3==2) {
                cell += "style='box-shadow: 0 1px 0 #000, "
            } else {
                cell += "style='box-shadow: 0 1px 0 rgb(150, 150, 150), "
            }
            if (rows%3==0) {
                cell += "0 -1px 0 #000, "
            } else {
                cell += "0 -1px 0 rgb(150, 150, 150), "
            }
            if (columns%3==2) {
                cell += "1px 0 0 #000, "
            } else {
                cell += "1px 0 0 rgb(150, 150, 150), "
            }
            if (columns%3==0) {
                cell += "-1px 0 0 #000;'>4</div>"
            } else {
                cell += "-1px 0 0 rgb(150, 150, 150);'>3</div>"
            }
            $("#container").append(cell);
        }
    }
    $(".grid").width(90);
    $(".grid").height(90);
}

$( document ).ready(function() {
    createGrid()
});

您可以看到这些单元格中的每个单元格实际上都有一个3或4，但是您看不到它们中的任何一个：（