CSS Grid Template Areas: Build a Full Page Layout

CSS grid-template-areas lets you name parts of a page, like header, sidebar, main and footer, and draw the layout as text. You also learn when to use Flexbox vs Grid.

What are grid template areas?

Line numbers work, but they are hard to read. grid-template-areas lets you name areas of your grid and draw the layout like a little map in your CSS. Each string in quotes is one row, and each word is one column.

It works in two steps:

1. Give each item a name with grid-area, like grid-area: header;.
2. On the container, draw where each name goes with grid-template-areas.

How to build a page layout with grid-template-areas

Here is the classic page layout with a header, a sidebar, the main content and a footer:

<div class="page">
  <header class="header">CodeCraft</header>
  <aside class="sidebar">Lessons menu</aside>
  <main class="main">
    <h1>CSS Grid Template Areas</h1>
    <p>This is where the lesson content goes.</p>
  </main>
  <footer class="footer">© 2026 CodeCraft</footer>
</div>

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 16px;
  padding: 16px;
}

.header  { grid-area: header;  background: #1f2937; color: white; padding: 16px; }
.sidebar { grid-area: sidebar; background: #f3f4f6; padding: 16px; }
.main    { grid-area: main;    padding: 16px; }
.footer  { grid-area: footer;  background: #e5e7eb; padding: 16px; }

The header goes across the full width at the top. Below it, the sidebar is 240 pixels wide on the left, and the main content fills the rest. The footer goes across the full width at the bottom. Because of min-height: 100vh and the middle row set to 1fr, the footer stays at the bottom of the screen even when there is little content.

Look at the grid-template-areas value: you can almost see the layout. To make an area cover two columns, you simply write its name twice.

Common mistake: Drawing an area that is not a rectangle, like an "L" shape, or giving rows a different number of columns. The whole grid-template-areas rule is then ignored. Every row must have the same number of words, and each area must form a rectangle.

Tip: Use a dot . for an empty cell. For example, "header header" ". main" leaves the bottom-left cell empty.

Changing the layout for phones

The real power of template areas is that you can rearrange the whole page by redrawing the map. You don't touch the HTML. Here we start with one column for phones, then switch to the sidebar layout on bigger screens. (Media queries are explained fully later in this course.)

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

@media (width >= 768px) {
  .page {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }
}

On a phone, everything stacks in one column: header, main content, then the sidebar, then the footer. On screens 768 pixels wide or more, the sidebar moves to the left of the main content. The grid-area names on each item stay the same.

Note: When you rearrange areas, the reading order for screen readers and the Tab key still follows the HTML. Keep your HTML in the order that makes sense to read.

Flexbox vs Grid: when to use which?

Both are modern, well-supported layout tools, and they work great together. The simplest rule: Flexbox for one direction, Grid for two directions.

Question	Flexbox	Grid
How many directions?	One: a row or a column	Two: rows and columns together
Who decides the sizes?	The content (content-first)	The layout you define (layout-first)
Best for	Navbars, button groups, centering, card content	Page layouts, galleries, dashboards, forms
Items lining up in columns across rows?	Not automatically	Yes, always
Overlapping items?	Not easily	Yes, by placing items in the same cells
Name parts of the layout?	No	Yes, with grid-template-areas

A common pattern is Grid for the big page structure, and Flexbox inside each part. For example, the header is a grid area, and inside it the logo and links are laid out with Flexbox. You can read more on MDN's grid layout guide.

Practice exercise

Build a blog page with four areas: a header, an article, an "about the author" box and a footer. On phones, stack them in this order: header, article, author, footer. On wide screens, put the author box to the right of the article, 300px wide.

Hint: on wide screens, use grid-template-columns: 1fr 300px; and the areas "header header" "article author" "footer footer".

Key takeaways

• grid-template-areas lets you draw a layout with names, one quoted string per row.
• Each item gets its name with grid-area; repeat a name to span columns or rows.
• Every row needs the same number of cells, and every area must be a rectangle.
• Redraw the areas in a media query to rearrange the page without changing the HTML.
• Use Flexbox for one direction and Grid for two; most layouts use both.