CSS grid-template-areas Property

What You’ll Learn

The grid-template-areas property defines named regions on a grid container using readable string rows.

Introduction

The grid-template-areas property in CSS is part of the CSS Grid Layout module. It allows you to define named grid areas within a grid container, making it easier to design complex layouts with a clear, readable syntax.

Definition and Usage

Set grid-template-areas on a grid container with display: grid. Each quoted string represents one row. Area names in the same row are separated by spaces. Assign items to those areas using grid-area on child elements.

📝 Syntax

The syntax for the grid-template-areas property uses strings to represent the grid layout. Each string defines a row, with named areas enclosed in quotes:

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

Assign Items to Areas

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Default Value

The default value of the grid-template-areas property is none, meaning no named grid areas are defined.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Each string must have the same number of area tokens (columns).
• Repeated names in adjacent cells form one rectangular area.
• Use a dot (.) for empty cells that should not hold content.
• The property is not inherited.

💎 Property Values

Examples Gallery

Build a classic page layout, create a simple 2×2 grid, leave empty cells with a dot, and design a magazine-style hero layout.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.grid {
  grid-template-areas:
    "a b"
    "c d";
}

.grid {
  grid-template-areas:
    ". nav nav"
    "aside content content";
}

.magazine {
  grid-template-areas:
    "hero hero hero"
    "feat feat aside"
    "card card aside";
}

♿ Accessibility

• Keep DOM order meaningful when named areas reorder visual layout.
• Use semantic HTML such as <header>, <nav>, <main>, and <aside>.
• Do not rely on area names alone to convey structure; use headings and landmarks.
• Test keyboard tab order when sidebar and main are visually reordered.
• Override area strings in media queries for readable mobile layouts.

💡 Best Practices