Codectionary / Developer documentation / CSS

grid-template-areas

grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.

Syntax

grid-template-areas: "area1 area2" "area3 area3";

Examples

A Classic Page Layout

Header, sidebar, main content, and footer, laid out visually in the CSS itself.

/* Demo setup: sizing, structure or neutral surfaces. */
.page{display:grid;grid-template-columns:200px 1fr;grid-template-areas:"header header" "sidebar main" "footer footer";gap:.5rem}.header{grid-area:header;background:#fef3c7}.sidebar{grid-area:sidebar;background:#d1fae5}.main{grid-area:main;background:#f3e8ff}.footer{grid-area:footer;background:#ffedd5}.page>*{padding:1rem;color:#172b4d}

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
  1. The region names connect real document sections to the template.
  2. The two-column arrangement gives the sidebar and main content different regions.
  3. Resize below 600px to compare a single-column order when the responsive rule is present.
HTML used by this example
<div class="page"><header class="header">Course header</header><aside class="sidebar">Lesson links</aside><main class="main">Main lesson</main><footer class="footer">Course footer</footer></div>

Reflowing Layout at a Breakpoint

Redefining the areas for a responsive, mobile-first layout change.

/* Demo setup: sizing, structure or neutral surfaces. */
.page{display:grid;grid-template-columns:200px 1fr;grid-template-areas:"header header" "sidebar main" "footer footer";gap:.5rem}.header{grid-area:header;background:#fef3c7}.sidebar{grid-area:sidebar;background:#d1fae5}.main{grid-area:main;background:#f3e8ff}.footer{grid-area:footer;background:#ffedd5}.page>*{padding:1rem;color:#172b4d}

@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}
  1. The region names connect real document sections to the template.
  2. The setup includes the desktop grid so the isolated media-query example has a working baseline.
  3. Resize below 600px to compare a single-column order when the responsive rule is present.
HTML used by this example
<div class="page"><header class="header">Course header</header><aside class="sidebar">Lesson links</aside><main class="main">Main lesson</main><footer class="footer">Course footer</footer></div>

Parameters and values

  • grid-template-areas (string list): Defines named regions visually, one quoted string per row
  • grid-area (string): Assigns a child element to a named area

Best practices

  • Format grid-template-areas strings so they visually resemble the actual layout - the readability is the entire point of this feature
  • Use a period (.) to represent an intentionally empty cell in the grid
  • Redefine grid-template-areas inside a media query to dramatically restructure layout at breakpoints, without touching the HTML
  • Every area name used in grid-area must appear in grid-template-areas, and the areas must form a valid rectangle

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading