CSS Grid Named Areas

Named areas let a stylesheet spell out a page layout as an actual visual diagram made of text, instead of a list of line numbers you have to count in your head.

In this page:

What grid-template-areas Does
Naming an Area and Placing an Item
Repeating a Name to Span Cells
Using a Period for Empty Cells
A Complete Page Layout Example

Syntax

css

.container {
  grid-template-areas:
    "header header"
    "sidebar main";
}
.item {
  grid-area: area-name;
}

What grid-template-areas Does

grid-template-areas defines the grid as a text-based diagram, where each string is a row and each word in it names the area that cell belongs to -- the CSS itself visually resembles the layout it produces.

Note:

Accepted values:
grid-template-areas — strings of area names, one per row
none — default, no named areas
grid-area — the name assigned to an item
. — a dot marks an empty cell
note: named areas must form rectangles
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: What grid-template-areas Does

css

<style>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main main";
  gap: 4px;
  background: #eee;
}
.container div {
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Diagram resembles the layout it produces</div>
</div>

Naming an Area and Placing an Item

A name given in grid-template-areas (like "header") is assigned to an item with grid-area: header on that same selector, so the item automatically lands in every cell carrying that name. This removes the need to count grid lines entirely -- you just match names between the diagram and the CSS rule.

Note:

Accepted values:
grid-area: header — places into the named area
grid-template-areas — defines the layout
name — any custom identifier
rectangular only — areas must form a rectangle

Example: Naming an Area and Placing an Item

css

<style>
.container {
  display: grid;
  grid-template-areas: "header";
  background: #eee;
  padding: 4px;
}
.header {
  grid-area: header;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="header">Matches the "header" name from the diagram</div>
</div>

Repeating a Name to Span Cells

Repeating the same name across multiple cells in the diagram -- horizontally, vertically, or both -- makes that one item span all of those cells; the repeated cells must form a solid rectangle.

Note:

Accepted values:
"a a b" — a spans two columns
"a a a" — a repeated across a row
. — empty cell
rule — the same name across rows spans them

Example: Repeating a Name to Span Cells

css

<style>
.container {
  display: grid;
  grid-template-areas:
    "banner banner"
    "banner banner";
  gap: 4px;
  background: #eee;
}
.banner {
  grid-area: banner;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="banner">Spans all four repeated cells</div>
</div>

Using a Period for Empty Cells

A single dot (.) in the template-areas string marks that cell as intentionally empty, leaving a visual gap in the layout with no item placed there. This is useful for deliberate whitespace in a design, like a blank column between a logo and a navigation menu.

Note:

Accepted values:
. — one empty cell
... — several dots merge into one empty cell
name — an occupied cell
note: no whitespace inside a name

Example: Using a Period for Empty Cells

css

<style>
.container {
  display: grid;
  grid-template-areas: "logo . nav";
  gap: 8px;
  background: #eee;
  padding: 4px;
}
.logo { grid-area: logo; background: steelblue; color: white; padding: 10px; }
.nav { grid-area: nav; background: seagreen; color: white; padding: 10px; }
</style>
<div class="container">
  <div class="logo">Logo</div>
  <div class="nav">Nav</div>
</div>

A Complete Page Layout Example

A typical page skeleton -- header spanning the full width, a sidebar and main content side by side, and a footer spanning the full width -- reads directly as three template-areas rows: "header header", "sidebar main", "footer footer".

Note:

Accepted values:
grid-template-areas — the layout map
grid-template-columns — column sizes
grid-template-rows — row sizes
grid-area — placed on each item

Example: A Complete Page Layout Example

css

<style>
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 4px;
  background: #eee;
}
.header { grid-area: header; background: steelblue; color: white; padding: 10px; }
.sidebar { grid-area: sidebar; background: seagreen; color: white; padding: 10px; }
.main { grid-area: main; background: coral; color: white; padding: 10px; }
.footer { grid-area: footer; background: darkslategray; color: white; padding: 10px; }
</style>
<div class="page">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Items Next Lesson → CSS Grid Item Align

CSS Grid Named Areas

What grid-template-areas Does

Naming an Area and Placing an Item

Repeating a Name to Span Cells

Using a Period for Empty Cells

A Complete Page Layout Example

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code