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; }