The grid-template-areas property offers a visualization of your layout structure directly in your CSS. It allows you to name grid items and then place them into the grid container by referencing those names in a string format.

Naming Grid Items

Before you can use template areas, you must assign a name to the direct children of the grid container using the grid-area property.

.header { grid-area: hd; }
.sidebar { grid-area: sd; }
.main    { grid-area: mn; }

Defining the Layout

On the container, use grid-template-areas. Each string represents a row. Each word in the string represents a column.

.container {
  display: grid;
  grid-template-areas:
    "hd hd"
    "sd mn";
}

Handling Empty Spaces

If you need an empty cell in your grid, use a dot (.) or a series of dots. This allows for complex whitespace management without empty HTML elements.

Best Practices

Keep names short (like header, main, footer) to keep the ASCII art readable. Align your strings in the CSS file so the visual structure is apparent to other developers reading the code.