grid-template-areas

Syntax

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

Examples

.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; }

@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

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

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation