Grid by Example

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

Line-based placement named lines

We can name lines rather than targeting them by number. Name the line inside brackets. In the code below you can see that I name the very first column line col1-start then comes the 100 pixel first column track. Having named the lines you can use the names, rather than numbers.

You always have the line numbers to use - even if you name some or all of your lines.

Read the specification | View example as full page

See the Pen Grid by Example 7: Line-based placement named lines by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples