Line-based placement spanning tracks with the span keyword
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; }