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

A

B

C

D