my squares.js
function squares() {
  var id=0;
  var s1="<div class='square' onClick='square_clicked(this);' a=' ' id='";
  var s2="<div class='square' id='";
  var s3="'></div>";
  for (var r=0;r<10;r++) {
    document.write("<div class='row'>");
    for (var c=0;c<10;c+=2) {
      document.write(s1+id+s3); id++;
      document.write(s2+id+s3); id++;
    }
    document.write('</div>');
  }
}
my styles.css

The border is just temporary for checking.

.row {
  display:flex;
}
.square {
  width:5vmin;
  height:5vmin;
  border:1px solid red;
}
my index.html → next page