
previous

page 4
next

I have padded all the images for this tute so they fit exactly on the grid.
You can see that this image needs to start in row 8 and span 3 rows, start in column 6 and span 2 columns.

index.html
<body>
<div id='game'>
<img src='images/scenes/3.jpg' id='scene'>
<img src='images/shapes/blue.png' id='blue'>
</div>
</body>
<div id='game'>
<img src='images/scenes/3.jpg' id='scene'>
<img src='images/shapes/blue.png' id='blue'>
</div>
</body>
styles.css
#blue {
height: 100%;
grid-row: 8 / span 3;
grid-column: 6 / span 2;
}
height: 100%;
grid-row: 8 / span 3;
grid-column: 6 / span 2;
}
And it's as simple as that!
previous
next