Aligning the grid with space-around and space-between
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. This time I have used:
align-content: space-aroundjustify-content: space-between
This means that extra space is distributed around the tracks and our desired 10 pixel gutter gets more space. However so do any areas which span more than one track as where they cross a gutter they gain this extra space too.
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);
align-content: space-around;
justify-content: space-between;
}
[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;
}