Grid Layout By Name: Working With grid-template-areas

Line-based placement is one way to position items on a CSS Grid, but it is not the only way. The grid-template-areas property offers a more visual approach: you describe the layout in plain text, and items find their places by name. This makes the structure of a component readable directly from the CSS.

The property takes one or more quoted strings, where each string represents a row. The number of cells in each string must correspond to the number of column tracks you have defined, or the rows are auto-sized. To make an area span multiple tracks, you repeat its name in each cell it should cover. For example, a grid with four areas, each spanning two rows and two columns, is written by listing each name twice per row and across two rows.

To place an element into a named area, you assign that name to the element with the grid-area property. An element with a class of test can be placed into an area named one with a single line of CSS:

.test {
  grid-area: one;
}

In practice, you define your areas on the container and then give each item a grid-area name. The item then occupies the full rectangular block of cells associated with that name. DevTools such as the Firefox Grid Inspector can display these named areas, confirming that the item spans the intended number of row and column tracks.

Rules For Defining Areas

There are a few constraints that make a grid-template-areas value valid. Breaking them invalidates the entire property, and the layout falls back to default placement.

  • The grid must be complete. Every cell has to be part of an area. To leave a cell empty, use a period (`.`). Multiple empty cells can be written as ..., as long as there are no spaces between the periods.
  • Areas must be unique. You cannot use the same name twice, because the property cannot place the same content into multiple locations. Duplicating a name invalidates the whole value.
  • Areas must be rectangular. You cannot create an “L” or “T” shaped area. Every area must be a contiguous rectangle, the same shape you could build with line-based placement.

Formatting the string values is a matter of style. Adding extra whitespace between cells and using multiple periods for a single empty cell can make the layout easier to visualize. For instance, you can line up columns by padding shorter names with spaces. Alternatively, the entire value can be written on a single line, which is also valid.

How grid-area Resolves Values

The reason areas must be rectangles is that the grid-area shorthand needs to map to four lines: grid-row-start, grid-column-start, grid-row-end, and grid-column-end. Any layout you define with named areas can also be created with line numbers.

The shorthand behaves differently depending on whether you pass line numbers or idents (names).

  • With line numbers: If you provide fewer than four values, the missing ones default to auto. An item with grid-area: 3 gets a grid-row-start of 3, with everything else auto. It is placed automatically in the first available column and spans one track in each direction.
  • With idents: If you miss a value, the spec says the end line should copy the start line. For example, missing grid-column-end makes it equal to grid-column-start. When the start and end values are identical, the end is discarded and reverts to auto, which spans one track. The same applies to the row values.

This behavior explains why grid-area: one works. When you define a named area in grid-template-areas, the edges of that area can be referenced as named lines: one-start for the start edges and one-end for the end edges. A single ident like one resolves to all four corners of the area. Omitting the remaining three values in the shorthand makes them copies of the first; since the start and end lines are identical, they revert to auto and place the item directly in the named area.

Positioning Additional Items

One limitation is that each cell can belong to only one named area. However, you can still layer extra items on top or in empty cells. The container grid still exposes line numbers, so you can use standard line-based placement for additional elements.

You also have access to implicit line names generated by the named areas. An area named one creates lines called one-start and one-end at its boundaries. These can be used to position other items relative to the area's edges without using numeric lines.

Responsive Reordering

One of the strengths of this technique is how easy it makes responsive design. For a single-column layout on small screens, you define one area per row. At a larger breakpoint, you can redefine the number of columns and the grid-template-areas value together. The visual layout of the component is immediately obvious from the CSS, which is a significant readability benefit.

Accessibility Considerations

Reordering content visually with grid areas does not change the source order of the HTML. Screen readers and keyboard navigation will follow the source order, not the visual layout. If you move things around significantly, you can create a disconnected experience for users who cannot see the screen. Always ensure the source order matches a logical reading order and does not conflict with the visual presentation.