An alternative to border

CSS offers an alternative to border. It's called outline. It has the advantage that it can be drawn inside an item by using a negative offset. Try this:

.highlight {
  outline:5px solid blue;
  outline-offset:-5px;
}

Well we have playable game - it's just a matter of changing a few numbers to move on to the planned 30 piece jigsaw.

But before we do, let's think about how to tell when a player has finished - in other words has all the pieces in their right place. See what you can come up with.

my finished.js
function finished() {
  var id=0;
  for (var r=1;r<3;r++) {
    for (var c=1;c<3;c++) {
      var el=document.getElementById(id);
      if (el.style.gridRowStart!=r) return false;
      if (el.style.gridColumnStart!=c) return false;
      id++;
    }
  }
  return true;
}