CSS Grid Template Areas — Named Grid Areas Explained

grid-template-areas lets you define your layout visually in CSS — you draw the grid with named regions, then assign elements to those regions. It’s one of the most readable ways to define complex layouts.

Use the CSS Grid Generator to build grid layouts visually.

Basic syntax

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

The quoted strings represent rows. Each word in the string is a named area. Repeating a name makes it span multiple cells.

Assigning elements to areas

Use grid-area to assign an element to a named region:

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

<div class="container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

Result: a classic two-column page layout with header and footer spanning the full width.

Empty cells with periods

Use . (period) to leave a grid cell empty:

grid-template-areas:
  "header header header"
  "sidebar main ."
  "footer footer footer";

The rightmost cell in the middle row is empty. Use multiple dots for clarity (they count as one area):

grid-template-areas:
  "header  header  header"
  "sidebar main    ......"
  "footer  footer  footer";

Full page layout example

.page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 260px 1fr 300px;
  grid-template-rows: 64px 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     content aside"
    "footer  footer  footer";
  gap: 0;
}

.page-header  { grid-area: header; }
.page-nav     { grid-area: nav; }
.page-content { grid-area: content; }
.page-aside   { grid-area: aside; }
.page-footer  { grid-area: footer; }

Responsive grid areas

Change the layout at different breakpoints by redefining grid-template-areas:

.page {
  display: grid;
  gap: 1rem;
  
  /* Mobile: single column */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "aside"
    "footer";
}

@media (min-width: 768px) {
  .page {
    /* Tablet: two columns */
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "header  header"
      "nav     content"
      "footer  footer";
  }
}

@media (min-width: 1200px) {
  .page {
    /* Desktop: three columns */
    grid-template-columns: 220px 1fr 280px;
    grid-template-areas:
      "header  header   header"
      "nav     content  aside"
      "footer  footer   footer";
  }
}

Dashboard layout example

.dashboard {
  display: grid;
  height: 100vh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "logo    topbar"
    "sidenav workspace";
}

.logo-area   { grid-area: logo; }
.topbar      { grid-area: topbar; }
.sidenav     { grid-area: sidenav; }
.workspace   { grid-area: workspace; }

Shorthand with grid-template

The grid-template property combines grid-template-rows, grid-template-columns, and grid-template-areas:

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "sidebar main"  1fr
    "footer footer" 50px
    / 200px 1fr;
}

Format: "area names" row-size for each row, then / column-sizes after.

Named lines from grid areas

Grid areas automatically create named lines you can reference:

grid-template-areas:
  "header header"
  "sidebar main";

/* These named lines are created automatically:
  header-start, header-end
  sidebar-start, sidebar-end
  main-start, main-end
*/

/* Place an element that starts where sidebar starts: */
.overlay {
  grid-column: sidebar-start / main-end;
  grid-row: header-end / -1;
}

Validating grid area syntax

Grid area definitions must be rectangular — you can’t create L-shapes or disconnected areas:

/* INVALID — header is not rectangular: */
grid-template-areas:
  "header sidebar"
  "header main";

/* VALID — header spans both rows: */
grid-template-areas:
  "header sidebar"
  "header main";
/* Wait, this IS valid — header spans rows 1-2, sidebar row 1, main row 2 */

/* INVALID — disconnected area: */
grid-template-areas:
  "header . header"
  "sidebar main sidebar";

Browser support

grid-template-areas has near-universal browser support (all modern browsers since 2017). No polyfills needed for any current browser.

Related tools

• CSS Grid Generator — build grid layouts visually
• CSS Grid Layout Guide — complete grid reference
• Responsive Grid Layout — responsive design with grid