Lesson 8: Template Areas | Gridlock Holmes

What Are Template Areas?

Grid template areas let you name sections of your grid and arrange them visually in your CSS. It's like drawing your layout with text - incredibly readable and easy to modify.

The Visual Approach

Instead of this (hard to visualize):

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

.header { grid-column: 1 / -1; }
.nav { grid-row: 2; }
.main { grid-column: 2; grid-row: 2; }
.aside { grid-column: 3; grid-row: 2; }
.footer { grid-column: 1 / -1; }

You can write this (visually clear):

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

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

The layout is immediately visible! You can see the header spanning all columns, the three-column middle section, and the full-width footer.

💡 Key Concept:

grid-template-areas defines the layout on the container. grid-area assigns items to named areas. It's a two-step process!

How Template Areas Work

Step 1: Define the Layout

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

Each string represents a row. Each word represents a cell in that row.

Step 2: Assign Items to Areas

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

Template Area Rules

Rule 1: Areas Must Be Rectangular

/* ✅ Valid - rectangular area */
grid-template-areas:
  "header header"
  "main   main";

/* ❌ Invalid - L-shaped area */
grid-template-areas:
  "header header"
  "main   footer"
  "main   footer";

Rule 2: Use Dots for Empty Cells

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

The dot (.) creates an empty cell where no content is placed.

Rule 3: Names Must Be Valid Identifiers

/* ✅ Valid names */
"header main sidebar"

/* ❌ Invalid - can't use numbers at start */
"1column 2column 3column"

/* ✅ But this works */
"col1 col2 col3"

Common Layouts with Template Areas

Classic Blog Layout

.blog {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 20px;
  min-height: 100vh;
}

App Dashboard

.dashboard {
  display: grid;
  grid-template-columns: 60px 200px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "icon   nav     header"
    "icon   nav     main";
  height: 100vh;
}

.icon-menu { grid-area: icon; }
.sidebar   { grid-area: nav; }
.top-bar   { grid-area: header; }
.content   { grid-area: main; }

Magazine Layout

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 200px);
  grid-template-areas:
    "featured featured featured featured aside aside"
    "featured featured featured featured aside aside"
    "story1   story1   story2   story2   story3 story3"
    "footer   footer   footer   footer   footer footer";
  gap: 16px;
}

Responsive Template Areas

Template areas make responsive design incredibly clear:

/* Desktop */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

/* Tablet */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
  }
  .aside { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

The layout changes are immediately obvious just by reading the template areas!

✅ Best Practice:

Use template areas for complex layouts where visualization helps. For simple grids, standard columns/rows syntax is often clearer.

Combining with Other Grid Properties

Template areas work great with other Grid features:

.layout {
  display: grid;
  grid-template-columns: 200px minmax(300px, 1fr) 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: clamp(16px, 2vw, 32px);
}

Real-World Example: Complete Page Layout

/* HTML */
<div class="page-layout">
  <header class="header">Site Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

/* CSS */
.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header  header"
    "nav     main    sidebar"
    "footer  footer  footer";
  gap: 24px;
  min-height: 100vh;
  padding: 20px;
}

.header  { grid-area: header; background: #3b82f6; }
.nav     { grid-area: nav; background: #8b5cf6; }
.main    { grid-area: main; background: white; }
.sidebar { grid-area: sidebar; background: #ec4899; }
.footer  { grid-area: footer; background: #6366f1; }

Debugging Template Areas

If your layout doesn't look right, check these common issues:

Did you spell area names consistently?
Are all areas rectangular (no L or T shapes)?
Does each row have the same number of cells?
Did you assign items to areas with grid-area?

⚠️ Common Mistake:

Forgetting to assign an item to an area with grid-area. The template areas define the layout, but items won't go there unless you assign them!

When to Use Template Areas

Perfect for:

Page layouts (header, nav, main, footer)
Dashboards with named sections
Complex magazine-style layouts
Any layout where visualization helps understanding

Skip it for:

Simple card grids (use auto-fit instead)
Layouts with many small cells
Dynamic layouts where area names change

📚 Lesson 8: Template Areas