and here's my styles.css:

.row {
  display:flex;
}
.square {
  width:7.2vmin;
  height:7.2vmin;
  border:.2vmin solid;
}

and, finally, my squares.js:

function squares() {
  var s1="<img src='images/0.png' class='square' id='";
  var id=0;
  var s2="' onClick='square_clicked(this);' a='7' v='0'>";
  for (var r=0; r<10; r++) {
    document.write("<div class='row'>");
    for (var c=0; c<10; c++) {
      document.write(s1+id+s2);
      id++;
    }
    document.write('</div>');
  }
  document.write('</div>');
}

Now we have to figure out how to spread the 8 ships across the grid so that all ships are no closer to each other than one square and no closer to the border either.

This won't be easy but I think I've come up with a reasonable approach.