Line-based placement shorthand - grid-area Line-based placement spanning tracks with the span keyword

To create Grid Areas that are larger than a single grid track we specify an end line that is more than one track away.

Here I am using the grid-column and grid-row shorthand and have omitted the end value for any items that span one row or column track.

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 / 3;
    grid-row: 1;
}
[fl_row] .b {
    grid-column: 3 ;
    grid-row: 1 / 3;
}
[fl_row] .c {
    grid-column: 1 ;
    grid-row: 2 ;
}
[fl_row] .d {
    grid-column: 2;
    grid-row: 2;
}

A

B

C

D