Advanced CSS Grid (grid-template-areas)

In this lesson you'll learn an intuitive way of building layouts using CSS Grid's grid-template-areas. This is for people searching "CSS grid-template-areas usage."

Using grid-template-areas lets you specify a layout intuitively, using "named cells." Picture it like being able to write out a layout diagram — "header, sidebar, main, footer" — directly as code.

The sample code draws a layout diagram as a string inside grid-template-areas, and matches each element to a name like grid-area: header;. Since the string's shape directly mirrors the finished layout, you can grasp the overall structure at a glance just by looking at the code.

A common beginner stumbling block is that the spelling of names in the grid-template-areas string and in the grid-area declarations must match exactly. Even a single character off means that element won't be placed where intended. Repeating the same name lets you merge cells too.

The appeal is being able to assemble a page's overall structure almost by copying out a layout sketch, without having to calculate complex grid-column numbers. This is well suited for building a template for a website with an overall fixed structure.