Projekt: Responsywna Strona z CSS Grid - Swiatynia Abu Simbel

@name, nadszedl czas, aby polaczyc wszystko, czego sie nauczyles o CSS Grid, i stworzyc kompletny projekt! Zbudujemy responsywna strone internetowa inspirowana kompleksem swiatynnym Abu Simbel, wykorzystujac wszystkie poznane techniki Grid.

Plan Projektu

Nasz projekt bedzie zawierac:

1. Header - naglowek rozciagajacy sie na cala szerokosc
2. Nawigacja - boczny panel z linkami
3. Sekcja Hero - duzy baner powitalny
4. Galeria - responsywna siatka artefaktow
5. Tresc glowna - artykul z informacjami
6. Sidebar - panel boczny z dodatkowymi informacjami
7. Footer - stopka

Struktura HTML

1<div class="abu-simbel">
2  <header class="site-header">
3    <h1>Swiatynia Abu Simbel</h1>
4    <nav class="top-nav">
5      <a href="#">Start</a>
6      <a href="#">Galeria</a>
7      <a href="#">Historia</a>
8      <a href="#">Kontakt</a>
9    </nav>
10  </header>
11
12  <section class="hero">
13    <h2>Odkryj Tajemnice Starożytnego Egiptu</h2>
14    <p>Monumentalna swiatynia wykuta w skale</p>
15  </section>
16
17  <section class="gallery">
18    <div class="artifact featured">Posag Ramzesa II</div>
19    <div class="artifact">Hieroglify</div>
20    <div class="artifact">Kolumny</div>
21    <div class="artifact">Freski</div>
22    <div class="artifact">Skarabeusz</div>
23    <div class="artifact">Sfinks</div>
24  </section>
25
26  <main class="content">
27    <h2>Historia Swiatyni</h2>
28    <p>Abu Simbel to jeden z najwspanialszych zabytkow Egiptu...</p>
29  </main>
30
31  <aside class="sidebar">
32    <h3>Informacje</h3>
33    <ul>
34      <li>Zbudowana: ok. 1264 p.n.e.</li>
35      <li>Budowniczy: Ramzes II</li>
36      <li>Lokalizacja: Nubia</li>
37    </ul>
38  </aside>
39
40  <footer class="site-footer">
41    <p>Egipska Akademia Kodowania</p>
42  </footer>
43</div>

CSS Grid - Glowny 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; }

Responsywna Galeria z 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}

Wyrownywanie Elementow

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 dla Responsywnosci

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}

Podsumowanie Calego Modulu CSS Grid

W tym module poznales wszystkie kluczowe techniki CSS Grid:

• Podstawy:

  display: grid

  ,

  grid-template-columns/rows

  ,

  gap

  , jednostka

  fr

• Pozycjonowanie:

  grid-column

  ,

  grid-row

  ,

  span

  ,

  grid-area

• Nazwane obszary:

  grid-template-areas

  do tworzenia wizualnych planow layoutu
• Wyrownywanie:

  justify-items/content

  ,

  align-items/content

  ,

  place-items

• Responsywnosc:

  auto-fill

  ,

  auto-fit

  ,

  minmax()

  ,

  repeat()

  , media queries

CSS Grid to potezne narzedzie, ktore pozwala tworzyc zarowno proste, jak i bardzo zlozone layouty. Polacz je z Flexbox dla komponentow wewnetrznych, a bedziesz mogl zbudowac dowolna strone internetowa!

Teraz Twoja kolej - stworz swoj wlasny monumentalny portal w edytorze ponizej!