Grid Template Areas

1. Introduction

CSS Grid Template Areas is one of the most elegant features in all of CSS. Instead of writing cryptic line numbers to position elements, you literally draw your layout as ASCII art in your CSS:

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

Then assign elements to areas by name:

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

The layout practically documents itself. This is especially powerful when combined with media queries to completely restructure layouts for different screen sizes.

2. Theory

grid-template-areas

Defines named areas in a visual grid layout. Rules:

• Each row is a quoted string
• Cell names within a string are separated by spaces
• A name repeated in adjacent cells creates a spanning area
• A dot (.) represents an empty cell
• All rows must have the same number of cells
• A named area must be a rectangle (L-shapes are not allowed)

grid-template-areas:
  "header  header  header"  /* row 1: header spans all 3 */
  "sidebar content aside"   /* row 2: three separate areas */
  "footer  footer  footer"; /* row 3: footer spans all 3 */

/* Empty cell (dot notation) */
grid-template-areas:
  "header header header"
  ". main sidebar"    /* first cell is empty */
  "footer footer .";

grid-area (on items)

Assigns a grid item to a named area. The name must match one defined in grid-template-areas.

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

Combining template-areas with template-columns and template-rows

.layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  grid-template-columns: 250px 1fr;   /* matches area columns */
  grid-template-rows: 64px 1fr 56px;  /* matches area rows */
  min-height: 100vh;
}

Responsive Layout with grid-template-areas

Template areas make responsive redesigns clean and readable:

/* Desktop */
.layout {
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  grid-template-columns: 250px 1fr;
}

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

The HTML doesn't change at all — just the CSS tells the browser how to rearrange the named areas. This is far more maintainable than changing flex-direction and order for each breakpoint.

3. Real World Example

Template areas excel at application shell layouts — the outer frame of a web application:

• Desktop: Top navbar, left sidebar, main content, right details panel, bottom status bar
• Tablet: Top navbar, main content, right panel collapses
• Mobile: Top navbar, main content, bottom navigation bar

Each breakpoint just redefines the template areas string — the elements always find their named regions. No order hacks, no complex selectors.

4. Code Example

<!-- HTML -->
<div class="app-layout">
  <header class="app-header">Header</header>
  <nav class="app-sidebar">Sidebar</nav>
  <main class="app-main">Main Content</main>
  <aside class="app-aside">Details Panel</aside>
  <footer class="app-footer">Footer</footer>
</div>

/* ===== APP LAYOUT WITH TEMPLATE AREAS ===== */

.app-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside "
    "footer  footer  footer";
  grid-template-columns: 260px 1fr 280px;
  grid-template-rows: 64px 1fr 56px;
  min-height: 100vh;
  gap: 0;
}

.app-header  { grid-area: header;  background: #1e293b; color: white; }
.app-sidebar { grid-area: sidebar; background: #f8fafc; border-right: 1px solid #e2e8f0; }
.app-main    { grid-area: main;    padding: 24px; overflow-y: auto; }
.app-aside   { grid-area: aside;   background: #f8fafc; border-left: 1px solid #e2e8f0; }
.app-footer  { grid-area: footer;  background: #0f172a; color: white; }

/* ===== TABLET (no right aside) ===== */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-areas:
      "header  header"
      "sidebar main  "
      "footer  footer";
    grid-template-columns: 260px 1fr;
  }
  .app-aside { display: none; } /* hide the panel */
}

/* ===== MOBILE (single column) ===== */
@media (max-width: 768px) {
  .app-layout {
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr 56px;
  }
  .app-sidebar { display: none; }
  .app-aside   { display: none; }
}


/* ===== DASHBOARD LAYOUT ===== */
.dashboard {
  display: grid;
  grid-template-areas:
    "title  title  title  "
    "stats  stats  chart  "
    "table  table  sidebar"
    "footer footer footer ";
  grid-template-columns: 1fr 1fr 300px;
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
  padding: 24px;
}

.dash-title   { grid-area: title; }
.dash-stats   { grid-area: stats; }
.dash-chart   { grid-area: chart; }
.dash-table   { grid-area: table; }
.dash-sidebar { grid-area: sidebar; }
.dash-footer  { grid-area: footer; }

5. Code Breakdown

The visual layout string

The three strings in grid-template-areas each represent one row. Each word is a column. The three words in row 2 ("sidebar main aside") map to the three columns defined in grid-template-columns: 260px 1fr 280px.

Responsive redesign without touching HTML

In the tablet media query, we change grid-template-areas to remove the aside column and update grid-template-columns to match. The HTML elements with grid-area: main, grid-area: sidebar etc. automatically move to their new positions. Zero HTML changes needed.

grid-template-rows: 64px 1fr 56px

Three rows matching the three rows in grid-template-areas: header (64px fixed), content area (flexible), footer (56px fixed). The 1fr row takes all remaining height.

Dashboard: descriptive names

The dashboard template area names read like documentation: title, stats, chart, table, sidebar, footer. Any developer reading the CSS immediately understands the layout without needing to see the rendered page.

6. Common Mistakes

• Non-rectangular areas. An area must form a rectangle. You cannot create an L-shaped area. Each named area must be a continuous rectangle.
• Row strings have different numbers of cells. Every row string must have the same number of cells. "header header" "main" is invalid (2 cells vs 1 cell). The second row needs a second word: "main ." (using a dot for an empty cell).
• Forgetting to update grid-template-columns when changing areas in media queries. The column count in the template string must match the column count in grid-template-columns.
• Misspelling area names. The name in grid-template-areas must exactly match the name in grid-area: name on the item. A typo causes the item to lose its placement.

7. Best Practices

• Use template areas for application shell layouts — they are readable and easy to modify.
• Align the column strings visually — use spaces to align names like a real grid. It makes the template readable at a glance.
• Use descriptive, semantic names — header, sidebar, main, footer not a, b, c.
• Combine with media queries — redefine the template areas string at each breakpoint for clean responsive redesigns.
• Use dots for intentionally empty cells rather than leaving gaps.

8. Practice Exercise

1. Build a classic web page layout (header, left sidebar, main, right sidebar, footer) using template areas. Draw the ASCII art first, then write the CSS.
2. Add a mobile media query that changes to single-column layout using a new template areas string.
3. Build a simple dashboard with 4 named areas: title, chart, stats, footer. Make chart span 2 columns.
4. Add a . (empty cell) somewhere in your layout — for example, an empty cell between columns.

9. Assignment

Build a complete 3-breakpoint responsive page layout using grid-template-areas:

• Desktop (1200px+): Header full-width, left sidebar 250px, main content, right panel 280px, footer full-width
• Tablet (768px–1199px): Header, sidebar collapsed (hidden), main content full width, footer
• Mobile (below 768px): Header, main content, sidebar shows at bottom as accordion-style section, footer
• Add a "news ticker" area below the header on desktop that disappears on tablet and mobile
• Use meaningful semantic HTML for each area: <header>, <nav>, <main>, <aside>, <footer>

10. Interview Questions

Q1: What is grid-template-areas and why is it useful?

Answer: grid-template-areas lets you define named regions in your grid layout using ASCII-art-like strings. Items are then assigned to these regions using grid-area: name. It is useful because the layout visually represents itself in the CSS, making it immediately readable. It is especially powerful for responsive layouts — just redefine the area strings in media queries.

Q2: What rules must a grid-template-area follow?

Answer: All rows must have the same number of cells. A named area must form a rectangle (no L-shapes). Use a dot for empty cells. Area names are case-sensitive. All cells of an area must be contiguous.

Q3: How do you make a grid area span multiple rows/columns using template areas?

Answer: Repeat the name in adjacent cells. For example, writing "header header header" makes the header span 3 columns. Writing the same name in rows 1 and 2 (in the same column position) makes it span 2 rows. The repeated name must always form a rectangle.

Q4: How do you restructure a layout for mobile using grid-template-areas?

Answer: In a media query, redefine grid-template-areas and grid-template-columns to match the mobile layout. For example, change from a three-string multi-column layout to single-column strings. The HTML elements with grid-area names automatically reposition without any HTML changes.

Q5: What is the difference between placing an item with grid-column/grid-row and using grid-area with named areas?

Answer: grid-column and grid-row use line numbers — they are positional and can be fragile (breaking when columns are added). Named areas with grid-template-areas and grid-area are semantic — items are assigned to named regions that can be repositioned without changing item CSS. Named areas are more maintainable for whole-page layouts.

11. Additional Resources

• MDN — grid-template-areas (search "MDN grid-template-areas")
• CSS-Tricks — Grid Template Areas (search "css-tricks grid template areas")
• Grid by Example — gridbyexample.com (named areas examples)
• web.dev — Learn CSS Grid template areas (search "web.dev grid template areas")