Grid
Grid
For games this is probably the right choice to fix things in rows and columns.
Grid
Grid Container
The element on which display: grid is applied.
I’ve picked body.
body {
display: grid;
grid-template-columns: 1fr 4fr;
}
Grid Items
The children (i.e. direct descendants) of the grid container.
Mine are header, section, article and footer.
header {
display: block;
grid-row: 1;
grid-column: 1 / span 2;
}
section {
display: block;
grid-row: 2;
grid-column: 1;
}
article {
display: block;
grid-row: 2;
grid-column: 2;
}
footer {
display: block;
grid-row: 3;
grid-column: 1 / span 2;
}
Positioning items against lines