Aligning the Grid
In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. Therefore we can align the grid inside the container - the default being start on both dimensions.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display: grid;
grid-gap: 10px;
border:solid;
height:375px;
width:450px;
grid-template-columns: repeat(4, 80px);
grid-template-rows: repeat(3,100px);
justify-content: center;
align-content: end;
}
[fl_row] .item1 {
grid-column: 1 / 5;
}
[fl_row] .item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
[fl_row] .item3 {
grid-column: 3 / 5;
}