Grid by Example

Everything you need to learn CSS Grid Layout

Defining Grid Areas

We can create named areas on the grid to put content into. To do this we first assign elements in our markup to a Grid Area, using the grid-area property.

We can then use the grid-template-areas property to describe where on the Grid these elements should sit.

Repeating the name of an area indicates that the area spans that grid track. Using a . or a sequence like .... indicates an empty track. Such as the very first cell on this grid.

Read the specification | View example as full page

See the Pen Grid by Example 11: Defining Grid Areas by rachelandrew (@rachelandrew) on CodePen.