Grid by Example

Everything you need to learn CSS Grid Layout

Line-based placement shorthand - grid-area

We can achieve the same result as in example 2 and 3 declaring all four values with the grid-area property. Again values are separated with a /. The order of the values is row-start/column-start/row-end/column-end.

Read the specification | View example as full page

See the Pen Grid by Example 4: Line-based placement shorthand grid-area by rachelandrew (@rachelandrew) on CodePen.