CSS Grid Areas and Template: Place Layout Regions with Grid

CSS Grid template areas let you define a layout with named regions such as header, sidebar, and main. This makes page structure easier to read, easier to maintain, and much clearer than placing every item with individual row and column numbers.

Quick answer: Use grid-template-areas on the container to draw the layout with names, then assign each child a matching grid-area value. Every row in the template must have the same number of columns, and empty cells are written with a dot.

Difficulty: Beginner

You'll understand this better if you know: basic CSS selectors, how the box model works, and the difference between a container and its child elements.

1. What Is CSS Grid Areas and Template?

CSS Grid areas are named layout regions inside a grid container. Instead of positioning content by counting lines, you describe the overall page structure using readable names.

grid-template-areas defines the visual map of the layout.
grid-area places each item into one named region.
Empty cells use a dot, which means “leave this grid cell blank.”
The template must be rectangular and consistent across rows.

This approach is especially useful for page layouts that have clear sections, such as a header, navigation, main content, sidebar, and footer.

2. Why CSS Grid Areas Matter

Named areas make CSS easier to understand at a glance. When someone reads the stylesheet later, they can see the intended layout without decoding row and column numbers.

Grid areas also reduce duplication. If you want to move a sidebar or change the size of a header, you often only adjust the container template instead of rewriting many item placement rules.

They are a strong fit for semantic layout work, especially when you want the HTML structure to stay simple and the visual design to be controlled in CSS.

3. Basic Syntax or Core Idea

A grid area layout has two parts: the container defines the template, and each item chooses a named area.

3.1 Define the grid template

The container uses grid-template-areas to sketch the layout with quoted rows.

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 220px 1fr;
  gap: 1rem;
}

This template defines two columns and three rows. The same name can appear across multiple cells to create a larger region.

3.2 Assign items to areas

Each child uses grid-area to match one name from the template.

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

Once the names match, the browser places each element into the correct cell group automatically.

3.3 Simple HTML structure

The HTML can stay semantic and easy to read.

<div class="layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main content</main>
  <footer class="footer">Footer</footer>
</div>

The layout is now controlled by CSS, while the HTML keeps the document structure meaningful.

4. Step-by-Step Examples

4.1 Two-column page with header and footer

This first example shows the most common use case: a simple page shell with a header, sidebar, main section, and footer.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 180px 1fr;
  gap: 1rem;
}

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

This layout is easy to scan and easy to change later. You can widen the navigation column or rename the areas without rewriting the HTML.

4.2 A three-column dashboard

Grid areas are useful when a dashboard has multiple panels that must stay aligned.

.dashboard {
  display: grid;
  grid-template-areas:
    "topbar topbar topbar"
    "menu stats chart"
    "menu activity chart";
  grid-template-columns: 200px 1fr 1fr;
  gap: 1rem;
}

Here, the menu area spans two rows, while chart spans two rows in the right column. That kind of asymmetric layout is where grid areas are especially convenient.

4.3 Leaving blank space in the template

A dot in the template means an empty cell. This is useful when you want spacing that is part of the layout, not just padding or margin.

.hero-layout {
  display: grid;
  grid-template-areas:
    "image content"
    "image .";
  grid-template-columns: 1fr 1fr;
}

The dot leaves the lower-right cell unused, which can help create a balanced composition.

4.4 Changing the template for responsive layouts

One benefit of named areas is that you can redefine the visual order at different breakpoints without moving elements in the HTML.

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

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

This pattern is common for mobile-first designs because the content order stays logical even as the layout changes.

5. Practical Use Cases

Marketing pages with a clear header, hero, content section, and footer.
App dashboards with side navigation and several content panels.
Article layouts with a main column, table of contents, and related links.
Product detail pages where image, summary, and purchase actions must line up neatly.
Admin interfaces that need stable regions across multiple screen sizes.

These are all situations where the page already has named structural parts, so a named grid maps naturally to the design.

6. Common Mistakes

Mistake 1: Using different column counts in each row

Each quoted row in grid-template-areas must describe the same number of columns. If one row has fewer names than another, the template is invalid.

Problem: The browser ignores the malformed template because the rows are not rectangular.

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main footer";
}

Fix: Make every row the same length and keep the template rectangular.

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

The corrected version works because each row now has the same number of grid cells.

Mistake 2: Assigning an area name that does not exist

An item only lands in a named region if the name matches a value in the template exactly.

Problem: If the template uses content but the item uses grid-area: main, the browser has no matching area for that item.

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
}

.main {
  grid-area: main;
}

Fix: Use the same name in both places.

.main {
  grid-area: content;
}

The corrected version works because the area name now matches the template.

Mistake 3: Expecting the template to place items without display: grid

The template only works on a grid container. If the container is not turned into a grid, the area definitions do nothing.

Problem: Without display: grid, the browser treats the layout like normal block content, so the named areas are ignored.

.layout {
  grid-template-areas:
    "header header"
    "main sidebar";
}

Fix: Add display: grid to the container first.

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "main sidebar";
}

The corrected version works because the container is now actually a grid formatting context.

7. Best Practices

7.1 Use meaningful names

Choose names that describe layout regions, not visual styling. sidebar, main, and footer are easier to understand than generic names like box1 or left2.

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

Clear names make the layout easier to maintain when the design changes.

7.2 Keep the HTML semantic

Use elements like header, nav, main, aside, and footer when they match the content. Grid areas should organize the page visually, not replace semantic structure.

<main class="main">Main content</main>

This keeps the document accessible and understandable for screen readers and search tools.

7.3 Use areas for large layout regions, not tiny components

Grid template areas shine when they describe the major sections of a page. For small cards, buttons, or tight internal layouts, line-based grid placement or simpler flexbox layouts may be easier.

.card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}

This approach avoids overcomplicating small UI pieces with named areas they do not really need.

8. Limitations and Edge Cases

Every row in grid-template-areas must have the same number of cells.
Area names are case-sensitive, so Main and main are different.
An item can only be assigned to one named area at a time.
Templates are visual, so they do not change the DOM order or reading order.
Using a dot creates empty space, but it does not create a real element or semantic landmark.
Named areas work only inside a grid container, not inside flexbox or normal block layout.

One important edge case is accessibility: if you visually reorder sections with grid, the tab order and screen reader order still follow the HTML source. That is usually a good thing, but it means visual order should not conflict with logical reading order.

9. Practical Mini Project

Let’s build a simple article page layout using named grid areas. This example includes a header, navigation, main content, and a related links panel.

.article-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "related main"
    "footer footer";
  grid-template-columns: 220px 1fr;
  gap: 1rem;
}

.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.article-main { grid-area: main; }
.related { grid-area: related; }
.site-footer { grid-area: footer; }

Here is the matching HTML structure:

<div class="article-layout">
  <header class="site-header">Article title</header>
  <nav class="site-nav">Navigation</nav>
  <main class="article-main">Main article content</main>
  <aside class="related">Related links</aside>
  <footer class="site-footer">Footer</footer>
</div>

This project shows how named areas map clearly to a real page structure. You can resize the page, adjust the column widths, or reorder sections in the template without changing the HTML content.

10. Key Points

grid-template-areas describes the layout with readable names.
grid-area assigns each item to one named region.
All rows in the template must have the same number of cells.
Dots represent empty cells.
Named areas are best for large, semantic page regions.
The visual order can change without changing the HTML structure.

11. Practice Exercise

Build a blog layout with four areas: header, content, sidebar, and footer.

Create a grid container with two columns.
Make the header and footer span both columns.
Place the content area in the wider column and the sidebar in the narrow column.
Use named areas instead of line numbers.

Expected output: A page layout with a full-width header and footer, plus a two-column middle section.

Hint: Draw the layout first as quoted rows, then give each element a matching grid-area name.

Solution:

.blog-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

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

This solution works because the template, the item names, and the column structure all match.

12. Final Summary

CSS Grid template areas give you a readable way to design page layouts. Instead of positioning each element with numbers, you name the regions and describe the layout as a visual map.

That makes your CSS easier to scan, easier to maintain, and easier to adapt for different screen sizes. When the layout has clear structural regions, named grid areas are one of the cleanest tools available in CSS.

If you want to go further, practice combining grid-template-areas with responsive media queries and different column sizes so you can build layouts that adapt cleanly across devices.