Grid Areas and Template Areas

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!

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Alignment in CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Gallery of Egyptian Statues</h1>
11
12    <h2>justify-items and align-items</h2>
13    <div class="gallery-items">
14        <div class="statue">Anubis</div>
15        <div class="statue">Horus</div>
16        <div class="statue">Isis</div>
17        <div class="statue">Osiris</div>
18        <div class="statue">Ra</div>
19        <div class="statue">Thoth</div>
20    </div>
21
22    <h2>justify-content and align-content</h2>
23    <div class="gallery-content">
24        <div class="artifact">Mask</div>
25        <div class="artifact">Scarab</div>
26        <div class="artifact">Amulet</div>
27    </div>
28
29    <!-- Task: Use the alignment properties -->
30    <!-- gallery-items: justify-items: center, align-items: center -->
31    <!-- gallery-content: justify-content: space-evenly, align-content: center -->
32</body>
33</html>