Grid Areas i Template Areas

Wyobraź sobie, że trzymasz w rękach papirus z planem całej świątyni egipskiej. Na planie każde pomieszczenie ma swoją nazwę - "sala tronowa", "skarbiec", "komnata kapłana". Dokładnie tak działa grid-template-areas w CSS Grid! Zamiast operować numerami linii, możesz nadać obszarom czytelne nazwy i stworzyć wizualny plan layoutu, który wygląda jak mapa ASCII.

grid-template-areas - Wizualny Plan Layoutu

Właściwość grid-template-areas pozwala zdefiniować układ strony za pomocą nazw, tworząc coś na kształt mapy:

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}

Każdy łańcuch tekstowy w cudzysłowie to jeden wiersz siatki. Nazwy powtórzone w wierszu oznaczają, że element rozciąga się na wiele kolumn. Patrząc na ten CSS, od razu widzisz strukturę całej strony - jak architekt patrzący na plan budynku!

Przypisywanie Elementów do Obszarów

Po zdefiniowaniu mapy obszarów, przypisujesz elementy HTML do odpowiednich nazw za pomocą 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; }

Odpowiedni HTML:

1<div class="temple-layout">
2  <header class="header">Nagłówek świątyni</header>
3  <nav class="nav">Nawigacja</nav>
4  <main class="main">Główna treść</main>
5  <aside class="aside">Panel boczny</aside>
6  <footer class="footer">Stopka</footer>
7</div>

Kolejność elementów w HTML nie ma znaczenia - grid umieści je zgodnie z mapą grid-template-areas. To ogromna zaleta!

Puste Obszary - Kropka jako Placeholder

Jeśli chcesz zostawić puste miejsce w siatce, użyj kropki (.):

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}

W powyższym przykładzie prawy górny narożnik drugiego wiersza pozostaje pusty - jak nieużywana komnata w świątyni. Możesz użyć wielu kropek (...) dla czytelności, np. "nav main ...".

Złożony Układ - Portal Egipski

Zobaczmy bardziej skomplikowany układ z wieloma sekcjami:

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

Zwróć uwagę, jak nawigacja (nav) rozciąga się przez dwa wiersze, a sekcja hero zajmuje dwie kolumny. Ten wizualny zapis sprawia, że struktura jest natychmiast zrozumiała.

Responsywne Areas z Media Queries

Największa moc grid-template-areas objawia się w połączeniu z media queries. Możesz całkowicie zmienić układ strony zmieniając tylko mapę obszarów:

1/* Desktop - trzy kolumny */
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 - dwie kolumny */
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 - jedna kolumna */
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}

Na każdym breakpoincie zmieniasz tylko mapę, a elementy HTML automatycznie się przestawiają. Nie musisz zmieniać żadnego HTML ani przypisań grid-area! To jak posiadanie trzech planów świątyni - jednego dla wielkiej budowli, jednego dla średniej i jednego dla małej - ale z tymi samymi pomieszczeniami.

Zasady grid-template-areas

Pamiętaj o kilku ważnych zasadach:

1. Każdy obszar musi być prostokątem - nie można tworzyć kształtów w kształcie litery L ani T
2. Nazwy mogą się powtarzać tylko w sposób tworzący prostokątny blok
3. Każdy wiersz musi mieć tę samą liczbę nazw (tyle ile kolumn)
4. Wielkie i małe litery mają znaczenie - "Header" to nie to samo co "header"
5. Nazwy nie mogą zawierać spacji - użyj myślników, np. side-bar

Nazwane obszary to jak plan architektoniczny wyrysowany na papirusie - przejrzysty, czytelny i łatwy do modyfikacji. Każdy dobry architekt egipski zaczynał od planu!

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>Wyrownywanie w CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Galeria Posagów Egipskich</h1>
11
12    <h2>justify-items i 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">Thot</div>
20    </div>
21
22    <h2>justify-content i align-content</h2>
23    <div class="gallery-content">
24        <div class="artifact">Maska</div>
25        <div class="artifact">Skarabeusz</div>
26        <div class="artifact">Amulet</div>
27    </div>
28
29    <!-- Zadanie: Uzyj wlasciwosci wyrownywania -->
30    <!-- gallery-items: justify-items: center, align-items: center -->
31    <!-- gallery-content: justify-content: space-evenly, align-content: center -->
32</body>
33</html>