
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>
#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;
el.style.gridRowStart=2;
el.style.gridColumnStart=2;
previous
next