Adding a CSS grid

Even if you don't try the following, you should try to imagine the result.

click me for my answer

<style>
  #grid {
    display:grid;
    width:200px;
    height:200px;
    grid-template-rows: repeat(2,100px);
    grid-template-columns: repeat(2,100px);
  }    
  .piece {
    background-image:url('images/squares.png');
    grid-row: 1/ span 1;
    grid-column: 1/ span 1;
    width:100%;
    height:100%;
  }
...
</style>
<div id='grid'>
  <div class='piece' id='p1'></div>
  <div class='piece' id='p2'></div>
  <div class='piece' id='p3'></div>
  <div class='piece' id='p4'></div>
</div>

So why haven't I spread the pieces out on the grid?

click me for my answer

We can do this with JavaScript like this:

  var el=document.getElementById('p1');
  el.style.gridRowStart=2;
  el.style.gridColumnStart=2;