Line-based placement spanning tracks with the span keyword Line-based placement named lines with spans

We can name lines rather than targeting them by number. Name the line inside brackets. In the code below you can see that I name the very first column line col1-start then comes the 1fr first column track. Having named the lines you can use the names, rather than numbers.

You always have the line numbers to use - even if you name some or all of your lines.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col3-end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}
[fl_row] .a {
    grid-column: col1-start / col3-start;
    grid-row: row1-start ;
}
[fl_row] .b {
    grid-column: col3-start;
    grid-row: row1-start / row2-end;
}
[fl_row] .c {
    grid-column: col1-start;
    grid-row: row2-start;
}
[fl_row] .d {
    grid-column: col2-start;
    grid-row: row2-start;
}

A

B

C

D