Line-based placement spanning tracks
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; }