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

@name, 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.

Project Plan

Our project will include:

1. Header — a heading spanning the full width
2. Navigation — a side panel with links
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

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>

CSS Grid — Main Layout

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; }

Responsive Gallery with auto-fit

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}

Aligning Elements

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}

Media Queries for Responsiveness

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}

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!

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