Grid generator

<!doctype html>

<html lang="en" style="height: 100%;">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
 <style>
body{
    line-height: 0;
}

#grid-wrapper{
padding: 0;
width: 520px;
margin: 0 auto;
}

.box{
    width: 50px;
    height: 50px;
    border: 2px solid black;
    border-right: 2px solid black;
    display:inline-block;
    padding: 0;
    margin: 0;
    margin-right: -2px;
    margin-bottom: -2px;
}
 </style>
</head>
<body style="height: 100%">
<div id=grid-wrapper> </div>
</body>
</html>

<script type="text/javascript">
let wrapper = document.querySelector("#grid-wrapper");
for(let i=0; i< 100; i++){
    let box = document.createElement("div");
    box.classList.add("box");
    wrapper.appendChild(box);
}
</script>