previous

page 3

next
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;
previous
next