
previous

page 3
next
styles.css
#game {
width: 120vmin;
height: 90vmin;
display: grid;
grid-template-rows: repeat(10,10%);
grid-template-columns: repeat(10,10%);
}
width: 120vmin;
height: 90vmin;
display: grid;
grid-template-rows: repeat(10,10%);
grid-template-columns: repeat(10,10%);
}
You won't see the lines but this is what we have behind the scenes. Note the numbering starts at 1 not zero. So we have rows 1 to 10 and columns 1 to 10.

To place an item on the grid all we have to specify is which row to start in and how many rows to span. Similarly with columns. The scene itself starts in row 1 and spans 10 rows and starts in column 1 and spans 10 columns.
#scene {
height: 100%;
grid-row: 1 / span 10;
grid-column: 1 / span 10;
}
height: 100%;
grid-row: 1 / span 10;
grid-column: 1 / span 10;
}
previous
next