CSS Grid-Template-Areas: Draw Your Layout in CSS

Why it exists

CSS Grid introduced powerful layout capabilities, but placing items using line numbers (grid-row-start, grid-column-end) can be verbose and hard to visualize or refactor. grid-template-areas was created to provide a more intuitive, visual way to define the overall structure of a grid layout, making code easier to read and maintain.

The mental model

Think of grid-template-areas as drawing a blueprint for your webpage directly in your CSS. Each string represents a row, and the names within the string represent columns. You are essentially creating a visual map of your layout, which makes it much easier to understand and modify than tracking numerical grid lines.

How it works

First, on the grid container, you define grid-template-areas. You provide a series of strings, where each string is a row in your grid. Inside the strings, you use names to map out your layout areas. For example, "header header header" defines a single area named header that spans three columns. The number of names per string defines the number of columns. To leave a cell empty, you use a period (.). Second, on a child element (a grid item), you use the grid-area property to assign it to one of the names you defined, like grid-area: header;.

When to use it

Use grid-template-areas for defining the overall page or component layout, especially when the structure is complex or needs to be responsive. It's perfect for common patterns like a "holy grail" layout (header, footer, main content, and sidebars) because you can easily rearrange the areas in a media query just by changing the strings.

When not to use it

Avoid this for very simple, one-dimensional layouts where Flexbox might be a better fit, or for layouts where items don't need to align into a strict grid. The main footgun is that any named area must form a complete rectangle. If you try to create an L-shaped or non-contiguous area by repeating a name in a way that doesn't form a rectangle, the entire property value becomes invalid and the layout will fail.

One canonical example

To create a simple card with a header, main content, and a sidebar, you could define the grid container like this: display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "header header" "content sidebar";. Then you would assign your HTML elements to these areas: the header element gets grid-area: header;, the main content gets grid-area: content;, and the sidebar gets grid-area: sidebar;. The header spans two columns, while content and sidebar sit below it.