Grid Areas and Template Areas

@name, imagine you are holding a papyrus scroll with the floor plan of an entire Egyptian temple. On the plan, each room has its own name — "throne room," "treasury," "priest's chamber." That is exactly how

grid-template-areas

works in CSS Grid! Instead of working with line numbers, you can give areas readable names and create a visual layout plan that looks like an ASCII map.

grid-template-areas — A Visual Layout Plan

The

grid-template-areas

property allows you to define a page layout using names, creating something like a map:

1.temple-layout {
2  display: grid;
3  grid-template-areas:
4    "header  header  header"
5    "nav     main    aside"
6    "footer  footer  footer";
7  grid-template-columns: 200px 1fr 200px;
8  grid-template-rows: auto 1fr auto;
9  min-height: 100vh;
10  gap: 10px;
11}

Each text string in quotes represents one row of the grid. Names repeated in a row mean the element spans multiple columns. Looking at this CSS, you can immediately see the structure of the entire page — like an architect looking at a building plan!

Assigning Elements to Areas

After defining the area map, you assign HTML elements to the corresponding names using

grid-area

:

1.header   { grid-area: header; }
2.nav      { grid-area: nav; }
3.main     { grid-area: main; }
4.aside    { grid-area: aside; }
5.footer   { grid-area: footer; }

The corresponding HTML:

1<div class="temple-layout">
2  <header class="header">Temple Header</header>
3  <nav class="nav">Navigation</nav>
4  <main class="main">Main Content</main>
5  <aside class="aside">Side Panel</aside>
6  <footer class="footer">Footer</footer>
7</div>

The order of elements in HTML doesn't matter — the grid will place them according to the

grid-template-areas

map. That's a huge advantage!

Empty Areas — The Dot as a Placeholder

If you want to leave an empty space in the grid, use a dot (

.

):

1.asymmetric-layout {
2  display: grid;
3  grid-template-areas:
4    "header header header"
5    "nav    main   ."
6    "nav    main   aside"
7    "footer footer footer";
8  grid-template-columns: 150px 1fr 200px;
9  gap: 15px;
10}

In the example above, the top-right corner of the second row remains empty — like an unused chamber in a temple. You can use multiple dots (

...

) for readability, e.g.,

"nav main ..."

.

Complex Layout — Egyptian Portal

Let's look at a more complex layout with multiple sections:

1.portal {
2  display: grid;
3  grid-template-areas:
4    "header  header   header"
5    "nav     hero     hero"
6    "nav     content  sidebar"
7    "footer  footer   footer";
8  grid-template-columns: 220px 1fr 280px;
9  grid-template-rows: 80px 200px 1fr 60px;
10  min-height: 100vh;
11  gap: 12px;
12}
13
14.portal-header  { grid-area: header; }
15.portal-nav     { grid-area: nav; }
16.portal-hero    { grid-area: hero; }
17.portal-content { grid-area: content; }
18.portal-sidebar { grid-area: sidebar; }
19.portal-footer  { grid-area: footer; }

Notice how the navigation (

nav

) stretches across two rows, and the hero section occupies two columns. This visual notation makes the structure immediately understandable.

Responsive Areas with Media Queries

The greatest power of

grid-template-areas

reveals itself when combined with media queries. You can completely change the page layout by just modifying the area map:

1/* Desktop - three columns */
2.page {
3  display: grid;
4  grid-template-areas:
5    "header  header  header"
6    "nav     main    aside"
7    "footer  footer  footer";
8  grid-template-columns: 200px 1fr 250px;
9}
10
11/* Tablet - two columns */
12@media (max-width: 768px) {
13  .page {
14    grid-template-areas:
15      "header  header"
16      "nav     main"
17      "aside   aside"
18      "footer  footer";
19    grid-template-columns: 180px 1fr;
20  }
21}
22
23/* Mobile - single column */
24@media (max-width: 480px) {
25  .page {
26    grid-template-areas:
27      "header"
28      "nav"
29      "main"
30      "aside"
31      "footer";
32    grid-template-columns: 1fr;
33  }
34}

At each breakpoint, you only change the map, and the HTML elements automatically rearrange. You don't need to change any HTML or

grid-area

assignments! It's like having three temple plans — one for a grand building, one for a medium one, and one for a small one — but with the same rooms.

Rules for grid-template-areas

Remember a few important rules:

1. Each area must be a rectangle — you cannot create L-shaped or T-shaped areas
2. Names can repeat only in a way that forms a rectangular block
3. Each row must have the same number of names (matching the number of columns)
4. Case matters — "Header" is not the same as "header"
5. Names cannot contain spaces — use hyphens, e.g.,

   side-bar

Named areas are like architectural blueprints drawn on papyrus — clear, readable, and easy to modify. Every good Egyptian architect started with a plan!