Line-based placement
Using the Grid I defined in example 1, I am positioning the elements in my markup (six divs with a class of box and classes from a to f) using line-based placement properties. This example is more verbose than it needs to be as a demonstration of the properties. In reality, if an item will only span one grid track you may omit the -end value.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display:grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
[fl_row] .a {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
[fl_row] .b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
[fl_row] .c {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
[fl_row] .d {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
[fl_row] .e {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
[fl_row] .f {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}