Project: Responsive Page with CSS Grid - The Abu Simbel Temple

The time has come to combine everything you've learned about CSS Grid and create a complete project! We will build a responsive website inspired by the Abu Simbel temple complex, using all the Grid techniques you've explored. This temple is, in fact, the best lesson in responsiveness: in the 1960s it was cut into blocks and reassembled higher up to save it from the waters of a new reservoir. The stones stayed the same, only the plan changed. Your page will work the same way, because the HTML will stay unchanged while we rebuild the layout for every screen.

Project Plan

Before we lay the first stone, let's list the sections. Our project will include:

1. Header - a heading spanning the full width
2. Navigation - links in the page header
3. Hero Section - a large welcome banner
4. Gallery - a responsive grid of artifacts
5. Main Content - an article with information
6. Sidebar - a side panel with additional information
7. Footer - the page footer

HTML Structure

We build the page skeleton from the semantic tags you met at the beginning of the course. All sections are direct children of the .abu-simbel container, because only direct children become grid items:

1<div class="abu-simbel">
2  <header class="site-header">
3    <h1>Temple of Abu Simbel</h1>
4    <nav class="top-nav">
5      <a href="#">Home</a>
6      <a href="#">Gallery</a>
7      <a href="#">History</a>
8      <a href="#">Contact</a>
9    </nav>
10  </header>
11
12  <section class="hero">
13    <h2>Discover the Secrets of Ancient Egypt</h2>
14    <p>A monumental temple carved into the rock</p>
15  </section>
16
17  <section class="gallery">
18    <div class="artifact featured">Statue of Ramesses II</div>
19    <div class="artifact">Hieroglyphs</div>
20    <div class="artifact">Columns</div>
21    <div class="artifact">Frescoes</div>
22    <div class="artifact">Scarab</div>
23    <div class="artifact">Sphinx</div>
24  </section>
25
26  <main class="content">
27    <h2>History of the Temple</h2>
28    <p>Abu Simbel is one of the most magnificent monuments of Egypt...</p>
29  </main>
30
31  <aside class="sidebar">
32    <h3>Information</h3>
33    <ul>
34      <li>Built: c. 1264 BCE</li>
35      <li>Builder: Ramesses II</li>
36      <li>Location: Nubia</li>
37    </ul>
38  </aside>
39
40  <footer class="site-footer">
41    <p>Egyptian Coding Academy</p>
42  </footer>
43</div>

The order in the HTML follows the logical reading order: header, banner, gallery, content, sidebar and footer. This is the order in which a screen reader will read the page, regardless of how we arrange it in CSS.

CSS Grid - Main Layout

Now we draw the temple plan with words. In grid-template-areas every quoted string is one row, and every word is one cell. Repeating a name makes the area stretch across several cells:

1.abu-simbel {
2  display: grid;
3  grid-template-areas:
4    "header  header"
5    "hero    hero"
6    "gallery gallery"
7    "content sidebar"
8    "footer  footer";
9  grid-template-columns: 1fr 300px;
10  grid-template-rows: auto auto auto 1fr auto;
11  gap: 20px;
12  min-height: 100vh;
13  padding: 20px;
14}
15
16.site-header  { grid-area: header; }
17.hero         { grid-area: hero; }
18.gallery      { grid-area: gallery; }
19.content      { grid-area: content; }
20.sidebar      { grid-area: sidebar; }
21.site-footer  { grid-area: footer; }

Each section lands in its area through grid-area, so we do not count any lines. Areas must form rectangles, otherwise the browser ignores the whole declaration, and you mark an empty cell with a period. The fourth row is sized 1fr, so thanks to min-height: 100vh the content and the sidebar fill the free height, and the footer stays at the bottom.

Responsive Gallery with auto-fit

The gallery is a grid within a grid, like chambers inside a great hall. It is an item of the main grid and, at the same time, a container with its own columns:

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4  gap: 15px;
5}
6
7.artifact.featured {
8  grid-column: span 2;
9  grid-row: span 2;
10}

The columns are between 200px and 1fr wide, so their number adapts to the screen width, and the statue of Ramesses II takes a two-by-two square. A nested grid has its own tracks, independent of its parent. If empty cells remain after the statue, add grid-auto-flow: dense to .gallery, and smaller artifacts will fill the gaps.

Aligning Elements

Grid aligns items on both axes. We split the header into two columns, the logo and the navigation, and center the banner with a single property:

1.site-header {
2  display: grid;
3  grid-template-columns: auto 1fr;
4  align-items: center;
5  gap: 20px;
6}
7
8.top-nav {
9  justify-self: end;
10  display: flex;
11  gap: 15px;
12}
13
14.hero {
15  display: grid;
16  place-items: center;
17  min-height: 300px;
18}

align-items: center aligns the logo and the links vertically, and justify-self: end pushes the navigation to the right edge of its cell. The links themselves are arranged by Flexbox, because they form a single row of items. The place-items: center shorthand combines align-items and justify-items, so the banner content sits exactly in the middle.

Media Queries for Responsiveness

On screens narrower than 768px, two columns are too many. It is enough to redraw the map of areas as a single column and undo the stretching of the featured statue:

1@media (max-width: 768px) {
2  .abu-simbel {
3    grid-template-areas:
4      "header"
5      "hero"
6      "gallery"
7      "content"
8      "sidebar"
9      "footer";
10    grid-template-columns: 1fr;
11  }
12
13  .artifact.featured {
14    grid-column: span 1;
15    grid-row: span 1;
16  }
17
18  .site-header {
19    grid-template-columns: 1fr;
20    text-align: center;
21  }
22
23  .top-nav {
24    justify-self: center;
25  }
26}

The HTML does not change by a single character, we only rebuild the plan, just like when Abu Simbel was moved. The sidebar lands below the content, the statue takes one cell, and the header stacks into a column. Here we start from the large-screen version and narrow it down with max-width. I prefer the opposite route, mobile-first with min-width, but both approaches are correct.

Complete CSS Grid Module Summary

In this module, you learned all the key CSS Grid techniques:

• Basics: display: grid, grid-template-columns/rows, gap, the fr unit
• Positioning: grid-column, grid-row, span, grid-area
• Named areas: grid-template-areas for creating visual layout plans
• Alignment: justify-items/content, align-items/content, place-items
• Responsiveness: auto-fill, auto-fit, minmax(), repeat(), media queries

CSS Grid is a powerful tool that allows you to create both simple and very complex layouts. Combine it with Flexbox for inner components, and you'll be able to build any website! In your portal you can also use named lines from the previous lesson instead of areas. Check the layout on screens from 320px up to very wide monitors and take screenshots at every breakpoint.

Now it's your turn - create your own monumental portal in the editor below!

Remember: grid-template-areas is a temple plan drawn with words, so you rebuild the plan while the HTML stones stay the same.

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>Project: Responsive Page - Abu Simbel</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="abu-simbel">
11        <header class="site-header">
12            <h1>Temple of Abu Simbel</h1>
13            <nav class="top-nav">
14                <a href="#">Home</a>
15                <a href="#">Gallery</a>
16                <a href="#">History</a>
17                <a href="#">Contact</a>
18            </nav>
19        </header>
20
21        <section class="hero">
22            <h2>Discover the Secrets of Ancient Egypt</h2>
23            <p>A monumental temple carved into the rock by Ramesses II</p>
24        </section>
25
26        <section class="gallery">
27            <div class="artifact featured">Statue of Ramesses II</div>
28            <div class="artifact">Hieroglyphs</div>
29            <div class="artifact">Columns</div>
30            <div class="artifact">Frescoes</div>
31            <div class="artifact">Scarab</div>
32            <div class="artifact">Sphinx</div>
33        </section>
34
35        <main class="content">
36            <h2>History of the Temple</h2>
37            <p>Abu Simbel is one of the most magnificent monuments of ancient Egypt. The temple was carved into a rock cliff on the west bank of the Nile.</p>
38            <p>Four colossal statues of Ramesses II guard the entrance to the temple, each 20 meters tall.</p>
39        </main>
40
41        <aside class="sidebar">
42            <h3>Information</h3>
43            <ul>
44                <li>Built: c. 1264 BCE</li>
45                <li>Builder: Ramesses II</li>
46                <li>Location: Nubia</li>
47                <li>Relocated: 1968</li>
48            </ul>
49        </aside>
50
51        <footer class="site-footer">
52            <p>Egyptian Coding Academy - CSS Grid Project</p>
53        </footer>
54    </div>
55</body>
56</html>