Grid Areas i Template Areas

@name, wyobraz sobie, ze trzymasz w rekach papirus z planem calej swiatyni egipskiej. Na planie kazde pomieszczenie ma swoja nazwe - "sala tronowa", "skarbiec", "komnata kaplana". Dokladnie tak dziala

grid-template-areas

w CSS Grid! Zamiast operowac numerami linii, mozesz nadac obszarom czytelne nazwy i stworzyc wizualny plan layoutu, ktory wyglada jak mapa ASCII.

grid-template-areas - Wizualny Plan Layoutu

Wlasciwosc

grid-template-areas

pozwala zdefiniowac uklad strony za pomoca nazw, tworzac cos na ksztalt 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}

Kazdy lancuch tekstowy w cudzyslowie to jeden wiersz siatki. Nazwy powtorzone w wierszu oznaczaja, ze element rozciaga sie na wiele kolumn. Patrzac na ten CSS, od razu widzisz strukture calej strony - jak architekt patrzacy na plan budynku!

Przypisywanie Elementow do Obszarow

Po zdefiniowaniu mapy obszarow, przypisujesz elementy HTML do odpowiednich nazw za pomoca

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">Naglowek swiatyni</header>
3  <nav class="nav">Nawigacja</nav>
4  <main class="main">Glowna tresc</main>
5  <aside class="aside">Panel boczny</aside>
6  <footer class="footer">Stopka</footer>
7</div>

Kolejnosc elementow w HTML nie ma znaczenia - grid umiesci je zgodnie z mapa

grid-template-areas

. To ogromna zaleta!

Puste Obszary - Kropka jako Placeholder

Jesli chcesz zostawic puste miejsce w siatce, uzyj 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 powyzszym przykladzie prawy gorny naroznik drugiego wiersza pozostaje pusty - jak nieuzywana komnata w swiatyni. Mozesz uzyc wielu kropek (

...

) dla czytelnosci, np.

"nav main ..."

.

Zlozony Uklad - Portal Egipski

Zobaczmy bardziej skomplikowany uklad 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; }

Zwroc uwage, jak nawigacja (

nav

) rozciaga sie przez dwa wiersze, a sekcja hero zajmuje dwie kolumny. Ten wizualny zapis sprawia, ze struktura jest natychmiast zrozumiala.

Responsywne Areas z Media Queries

Najwieksza moc

grid-template-areas

objawia sie w polaczeniu z media queries. Mozesz calkowicie zmienic uklad strony zmieniajac tylko mape obszarow:

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 kazdym breakpoincie zmieniasz tylko mape, a elementy HTML automatycznie sie przestawiaja. Nie musisz zmieniac zadnego HTML ani przypisowan

grid-area

! To jak posiadanie trzech planow swiatyni - jednego dla wielkiej budowli, jednego dla sredniej i jednego dla malej - ale z tymi samymi pomieszczeniami.

Zasady grid-template-areas

Pamietaj o kilku waznych zasadach:

1. Kazdy obszar musi byc prostokatem - nie mozna tworzyc ksztaltow w ksztalcie litery L ani T
2. Nazwy moga sie powtarzac tylko w sposob tworzacy prostokatny blok
3. Kazdy wiersz musi miec te sama liczbe nazw (tyle ile kolumn)
4. Wielkie i male litery maja znaczenie - "Header" to nie to samo co "header"
5. Nazwy nie moga zawierac spacji - uzyj myslnikow, np.

   side-bar

Nazwane obszary to jak plan architektoniczny wyrysowany na papirusie - przejrzysty, czytelny i latwy do modyfikacji. Kazdy dobry architekt egipski zaczynal od planu!