Grid by Example

Everything you need to learn CSS Grid Layout

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.

Read the specification | View example as full page

See the Pen Grid by Example 5: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.