Projekt: Responsywna Strona z CSS Grid - Świątynia Abu Simbel

Nadszedł czas, aby połączyć wszystko, czego nauczyłeś się o CSS Grid, i stworzyć kompletny projekt! Zbudujemy responsywną stronę internetową inspirowaną kompleksem świątynnym Abu Simbel, wykorzystując wszystkie poznane techniki Grid. Ta świątynia to zresztą najlepsza lekcja responsywności: w latach sześćdziesiątych XX wieku pocięto ją na bloki i złożono wyżej, by uratować przed wodami nowego zbiornika. Kamienie pozostały te same, zmienił się tylko plan. Z Twoją stroną będzie podobnie, bo HTML zostanie bez zmian, a układ przebudujemy dla każdego ekranu.

Plan projektu

Zanim położymy pierwszy kamień, rozpiszmy sekcje. Nasz projekt będzie zawierać:

1. Header - nagłówek rozciągający się na całą szerokość
2. Nawigacja - linki w nagłówku strony
3. Sekcja Hero - duży baner powitalny
4. Galeria - responsywna siatka artefaktów
5. Treść główna - artykuł z informacjami
6. Sidebar - panel boczny z dodatkowymi informacjami
7. Footer - stopka

Struktura HTML

Szkielet strony budujemy ze znaczników semantycznych, które poznałeś na początku kursu. Wszystkie sekcje są bezpośrednimi dziećmi kontenera .abu-simbel, bo tylko bezpośrednie dzieci stają się elementami siatki:

1<div class="abu-simbel">
2  <header class="site-header">
3    <h1>Świątynia 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 świątynia wykuta w skale</p>
15  </section>
16
17  <section class="gallery">
18    <div class="artifact featured">Posąg 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 Świątyni</h2>
28    <p>Abu Simbel to jeden z najwspanialszych zabytków 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>

Kolejność w HTML odpowiada logicznej kolejności czytania: nagłówek, baner, galeria, treść, panel boczny i stopka. Właśnie w takiej kolejności przeczyta stronę czytnik ekranu, niezależnie od tego, jak ułożymy ją w CSS.

CSS Grid - Główny Layout

Teraz rysujemy plan świątyni słowami. W grid-template-areas każdy napis w cudzysłowie to jeden wiersz, a każde słowo to jedna komórka. Powtórzenie nazwy sprawia, że obszar rozciąga się na kilka komórek:

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

Każda sekcja trafia do swojego obszaru przez grid-area, więc nie liczymy żadnych linii. Obszary muszą tworzyć prostokąty, inaczej przeglądarka zignoruje całą deklarację, a pustą komórkę oznaczysz kropką. Czwarty wiersz ma rozmiar 1fr, więc dzięki min-height: 100vh treść i panel boczny wypełnią wolną wysokość, a stopka zostanie na dole.

Responsywna Galeria z auto-fit

Galeria to siatka w siatce, jak komnaty wewnątrz wielkiej sali. Jest elementem głównego gridu, a jednocześnie sama staje się kontenerem z własnymi kolumnami:

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}

Kolumny mają od 200px do 1fr, więc ich liczba dopasuje się do szerokości ekranu, a posąg Ramzesa II zajmie kwadrat dwa na dwa. Zagnieżdżona siatka ma własne ścieżki, niezależne od rodzica. Jeśli po posągu zostaną puste komórki, dopisz do .gallery deklarację grid-auto-flow: dense, a mniejsze artefakty wypełnią luki.

Wyrównywanie Elementów

Grid wyrównuje elementy w obu osiach. Nagłówek dzielimy na dwie kolumny, logo i nawigację, a baner centrujemy jedną właściwością:

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 wyrównuje logo i linki w pionie, a justify-self: end dosuwa nawigację do prawej krawędzi jej komórki. Same linki układa Flexbox, bo to jeden rząd elementów. Skrót place-items: center łączy align-items i justify-items, więc treść banera stoi dokładnie pośrodku.

Media Queries dla Responsywności

Na ekranach węższych niż 768px dwie kolumny to za dużo. Wystarczy przerysować mapę obszarów w jedną kolumnę i cofnąć rozciąganie wyróżnionego posągu:

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}

HTML nie zmienia się ani o znak, przebudowujemy tylko plan, dokładnie jak przy przenosinach Abu Simbel. Panel boczny ląduje pod treścią, posąg zajmuje jedną komórkę, a nagłówek układa się w kolumnie. Tutaj zaczynamy od wersji na duży ekran i zawężamy ją przez max-width. Ja wolę odwrotną drogę, mobile-first z min-width, ale oba podejścia są poprawne.

Podsumowanie Całego Modułu CSS Grid

W tym module poznałeś 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 planów layoutu
• Wyrównywanie: justify-items/content, align-items/content, place-items
• Responsywność: auto-fill, auto-fit, minmax(), repeat(), media queries

CSS Grid to potężne narzędzie, które pozwala tworzyć zarówno proste, jak i bardzo złożone layouty. Połącz je z Flexboxem dla komponentów wewnętrznych, a będziesz mógł zbudować dowolną stronę internetową! W swoim portalu możesz zamiast obszarów użyć też nazwanych linii z poprzedniej lekcji. Sprawdź układ na ekranach od 320px aż po bardzo szerokie monitory i zrób zrzuty ekranu dla każdego breakpointu.

Teraz Twoja kolej - stwórz swój własny monumentalny portal w edytorze poniżej!

Pamiętaj: grid-template-areas to plan świątyni narysowany słowami, więc przebudowujesz plan, a kamienie HTML zostają te same.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Projekt: Responsywna Strona - 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>Swiatynia Abu Simbel</h1>
13            <nav class="top-nav">
14                <a href="#">Start</a>
15                <a href="#">Galeria</a>
16                <a href="#">Historia</a>
17                <a href="#">Kontakt</a>
18            </nav>
19        </header>
20
21        <section class="hero">
22            <h2>Odkryj Tajemnice Starozytnego Egiptu</h2>
23            <p>Monumentalna swiatynia wykuta w skale przez Ramzesa II</p>
24        </section>
25
26        <section class="gallery">
27            <div class="artifact featured">Posag Ramzesa II</div>
28            <div class="artifact">Hieroglify</div>
29            <div class="artifact">Kolumny</div>
30            <div class="artifact">Freski</div>
31            <div class="artifact">Skarabeusz</div>
32            <div class="artifact">Sfinks</div>
33        </section>
34
35        <main class="content">
36            <h2>Historia Swiatyni</h2>
37            <p>Abu Simbel to jeden z najwspanialszych zabytkow starozytnego Egiptu. Swiatynia zostala wykuta w skalnym klifie na zachodnim brzegu Nilu.</p>
38            <p>Cztery kolosalne posagi Ramzesa II strzega wejscia do swiatyni, kazdy o wysokosci 20 metrow.</p>
39        </main>
40
41        <aside class="sidebar">
42            <h3>Informacje</h3>
43            <ul>
44                <li>Zbudowana: ok. 1264 p.n.e.</li>
45                <li>Budowniczy: Ramzes II</li>
46                <li>Lokalizacja: Nubia</li>
47                <li>Przeniesiona: 1968 r.</li>
48            </ul>
49        </aside>
50
51        <footer class="site-footer">
52            <p>Egipska Akademia Kodowania - Projekt CSS Grid</p>
53        </footer>
54    </div>
55</body>
56</html>