Line-based placement named lines with spans
You can give lines the same name and then use the span keyword to target lines of a certain name. This is really useful if you want to create a complex grid with multiple content tracks and gutters.
I have made a slightly larger grid here and have named all of the Grid Lines before the content tracks with col and all of the lines before the row tracks with row. I can then start at a certain column line by using col <line number> and span by saying span <number of lines>.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display:grid;
grid-gap: 10px;
grid-template-columns: [col] 1fr [col] 1fr [col] 1fr [col] 1fr;
grid-template-rows: [row] auto [row] auto [row];
}
[fl_row] .a {
grid-column: col / span 2;
grid-row: row ;
}
[fl_row] .b {
grid-column: col 3 / span 2 ;
grid-row: row ;
}
[fl_row] .c {
grid-column: col ;
grid-row: row 2 ;
}
[fl_row] .d {
grid-column: col 2 / span 3 ;
grid-row: row 2 ;
}
[fl_row] .e {
grid-column: col / span 4;
grid-row: row 3;
}