jQuery代码用＃39;填充整个身体。＆＃39;

Question

我尝试用＆＃39;（一个点）填充整个HTML文档。这样我的HTML文档就像一个网格物体。以下是我所取得的成果：jsFiddle当我在子类中更改display:block时，所有点都会垂直对齐。我想实现一个正方形的网格点，它跨越整个HTML文档的主体，每个点都在子类中。我有什么方法可以做到吗？

HTML

<div id="main"></div>

的jQuery

$(document).ready(function() {
  for (var i = 0; i < 1000; i++) {
    $("#main").append("<div class='child'>.</div>");
  }
});

CSS

body,
html {
  width: 100%;
  height: 100%;
}
#main {
  width: 100%;
  height: 100%;
}
.child {
  width: 2px;
  height: 2px;
  display: inline;
}