Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

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.

Read the specification | View example as full page

See the Pen Grid by Example 6: Line-based placement span keyword by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples