Line-based placement spanning tracks with the span keyword
We can also span using the span keyword. This example creates the same layout as the one in example 5. I am using the span keyword rather than targeting the Grid Line by number. I am also using the defaults for row and column end, which is to span 1.
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: 1 / span 2;
}
[fl_row] .b {
grid-column: 3 ;
grid-row: 1 / span 2;
}
[fl_row] .c {
grid-column: 1 ;
grid-row: 2 ;
}
[fl_row] .d {
grid-column: 2;
grid-row: 2;
}