🗺️ grid-template-areas — Designing Layouts Using Named Areas in CSS Grid

🌐 What is grid-template-areas?

grid-template-areas is a CSS Grid container property that allows you to create layouts using named areas instead of manual line numbers. It makes complex layouts easier to read, maintain, and modify — almost like drawing your layout using ASCII art.

>>“grid-template-areas lets you design layouts visually, using words instead of numbers.”

🎯 Why Use grid-template-areas?

  • Creates readable & descriptive layouts
  • Makes designing page structures intuitive
  • Easy to rearrange item positions without touching HTML
  • Perfect for responsive layout changes
  • Helps avoid confusing grid-line numbers

📌 Syntax

Basic Syntax

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

Each string becomes a visual “map” of your layout. Repeated names allow areas to span multiple rows or columns.

🧱 Assigning Areas to Items

Use grid-area inside grid items to connect them to named areas.

Assigning Items

header { grid-area: header; }
aside { grid-area: sidebar; }
main  { grid-area: content; }
footer { grid-area: footer; }

📐 Visual Example

Media content

🧪 Full Example Layout

Complete Layout Example

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px auto 60px;

  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer; }

This creates a classic header/sidebar/content/footer layout using only names.

🔥 Overlapping Areas (Optional)

grid-template-areas does NOT support overlapping areas, but each grid cell must belong to exactly one named area or a dot (.).

Using Dots for Empty Space

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

Note

🧠 A dot (.) means “empty cell” → used when you want spacing.

🧩 Responsive Layouts with Areas

One of the biggest advantages of areas is how easy it is to rearrange the layout for different screen sizes.

Responsive Example

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 800px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }
}

Mobile — stacked layout
Desktop — traditional sidebar layout

🧠 Rules to Remember

  • Every row must have the same number of area names
  • Dotted areas . represent empty cells
  • Each named area must form a perfect rectangle (no L-shapes!)
  • grid-area names must match exactly
  • You can repeat area names to make them span multiple tracks

⚠️ Common Mistakes

  • Mismatched column count in each row of area definitions
  • Misspelled area names (won’t map to items)
  • Trying to make non-rectangular areas (not allowed)
  • Using grid-template-areas without assigning grid-area to children

Note

💡 If your layout breaks, first check that each row has the same number of names!

🆚 grid-template-areas vs grid-template-rows/columns

Featuregrid-template-areasLine-based Layout
Ease of UseVery easy & visualMore technical
ReadabilityHighLow for complex layouts
PrecisionGoodExcellent
Best ForPage layouts, dashboardsComplex dynamic positioning

🔥 Summary

grid-template-areas is one of the most powerful and user-friendly features of CSS Grid. It turns layout creation into a readable, logical, and visual process — no more guessing line numbers.

>>“Design layouts like you're drawing them — grid-template-areas makes CSS Grid human-friendly.”

Learn more →MDN Docs 📘