grid-template-areas

Definition

The grid-template-areas CSS property is used in grid layouts to define the grid structure by assigning named grid areas to specific grid cells. It allows you to create complex grid layouts with designated areas for content placement.

The grid-template-areas property accepts a string value consisting of names enclosed in quotation marks or periods representing empty grid cells. Each row of the string corresponds to a grid row, and each character within a row represents a grid cell.

Here’s an example:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

In this example, the grid-template-areas rule defines a grid layout with three rows and three columns. The names “header”, “sidebar”, “content”, and “footer” represent the desired areas within the grid.

The layout indicates that the header area spans across all three columns in the first row, the sidebar area spans across the first column in the second row, and the content area spans across the second and third columns in the second row, and so on.

By assigning named areas to grid cells using grid-template-areas, you can create more structured and visually organized grid layouts. It provides flexibility in positioning and rearranging content within the grid.

Syntax

.dashboard {
  display: grid;
  grid-template-areas: 
    "nav nav"
    "sidebar main";
}

Values

Quoted strings defining area names per row.
. denotes empty cells.

Practical Examples

.dashboard {
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "nav nav"
    "sidebar main";
  gap: 1.5rem;
}

Assign semantic names to grid regions and reference them with grid-area.

HTML

Primary navigation

Main content

Code

<div class="grid gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm" style="display:grid; grid-template-columns: 18rem 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'nav nav' 'sidebar main'; gap:1rem;">
  <header class="rounded-lg bg-slate-900/90 p-4 text-sm font-semibold text-white" style="grid-area: nav;">Primary navigation</header>
  <aside class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700" style="grid-area: sidebar;">Sidebar</aside>
  <main class="rounded-lg bg-slate-50 p-4 text-sm text-slate-700" style="grid-area: main;">Main content</main>
</div>

Tips & Best Practices

Use descriptive area names (header, main, aside) for clarity.
Combine with media queries to rearrange areas responsively by redefining the template.

Accessibility & UX Notes

Areas make layout intentions clear, but keep DOM order semantic for assistive tech.

Browser Support

Supported in modern browsers; IE ignores grid-template-areas.

grid-area property
grid-template shorthand
grid shorthand