Kurs HTML

Wizualne definiowanie układu

Oprócz umieszczania elementów za pomocą numerów lub nazw linii, CSS Grid Layout oferuje jeszcze bardziej wizualny i często intuicyjny sposób definiowania układu za pomocą właściwości grid-template-areas. Pozwala ona stworzyć "mapę" siatki, przypisując nazwy do poszczególnych komórek lub grup komórek, a następnie umieszczać elementy w tych nazwanych obszarach.

Ten sposób jest szczególnie przydatny do definiowania głównych sekcji layoutu strony (nagłówek, treść, sidebar, stopka).

Właściwość grid-template-areas stosuje się do **kontenera Grid**.

Składnia grid-template-areas

Wartością grid-template-areas jest seria ciągów znaków (stringów) ujętych w cudzysłowy, gdzie każdy ciąg reprezentuje jeden **wiersz** siatki. Wewnątrz każdego ciągu, nazwy obszarów (oddzielone spacjami) definiują, który obszar zajmuje daną **kolumnę** w tym wierszu.

• Nazwy obszarów: Dowolne identyfikatory (ciągi znaków bez spacji, np. header, main-content, sidebar).
• Pusta komórka: Kropka (.) lub seria kropek (...) oznacza pustą komórkę, która nie należy do żadnego nazwanego obszaru.
• Struktura: Liczba nazw (lub kropek) w każdym ciągu musi odpowiadać liczbie kolumn zdefiniowanych w grid-template-columns. Liczba ciągów musi odpowiadać liczbie wierszy zdefiniowanych w grid-template-rows.
• Obszar prostokątny: Aby utworzyć obszar obejmujący wiele komórek, należy użyć tej samej nazwy w sąsiadujących komórkach, tworząc prostokątny kształt.

.container {
  display: grid;
  grid-template-columns: 150px 1fr; /* Dwie kolumny */
  grid-template-rows: auto 1fr auto; /* Trzy wiersze */
  gap: 10px;

  grid-template-areas:
    "header header"   /* Wiersz 1: Obszar 'header' zajmuje obie kolumny */
    "sidebar main"    /* Wiersz 2: Kolumna 1 to 'sidebar', kolumna 2 to 'main' */
    "footer footer";  /* Wiersz 3: Obszar 'footer' zajmuje obie kolumny */
}

Ten kod definiuje typowy układ strony:

• Nagłówek (header) na górze, rozciągnięty na całą szerokość.
• Poniżej, lewa kolumna to pasek boczny (sidebar), a prawa to treść główna (main).
• Na dole stopka (footer), rozciągnięta na całą szerokość.

Umieszczanie elementów w nazwanych obszarach: grid-area

Po zdefiniowaniu nazwanych obszarów za pomocą grid-template-areas, umieszczamy w nich elementy Grid za pomocą właściwości grid-area, stosowanej do **elementu Grid**. Wartością grid-area jest po prostu nazwa obszaru zdefiniowana w grid-template-areas.

<div class="container">
  <header class="grid-item">Nagłówek</header>
  <aside class="grid-item">Sidebar</aside>
  <main class="grid-item">Treść główna</main>
  <footer class="grid-item">Stopka</footer>
</div>

/* ... definicja .container z grid-template-areas jak wyżej ... */

.grid-item {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 10px;
}

header {
  grid-area: header; /* Umieść ten element w obszarze 'header' */
  background-color: lightblue;
}

aside {
  grid-area: sidebar; /* Umieść ten element w obszarze 'sidebar' */
  background-color: lightgreen;
}

main {
  grid-area: main; /* Umieść ten element w obszarze 'main' */
  background-color: lightyellow;
}

footer {
  grid-area: footer; /* Umieść ten element w obszarze 'footer' */
  background-color: lightcoral;
}

To wszystko! Elementy zostaną automatycznie umieszczone w odpowiednich obszarach zdefiniowanych przez grid-template-areas. Jest to bardzo czytelny i semantyczny sposób budowania layoutu.

Niejawne nazwy linii

Jak wspomniano wcześniej, gdy używasz grid-template-areas, Grid automatycznie tworzy **niejawne nazwane linie** na podstawie nazw obszarów. Dla każdego obszaru o nazwie foo tworzone są linie foo-start i foo-end zarówno w pionie, jak i w poziomie, które otaczają ten obszar.

Dzięki temu można mieszać podejścia: definiować główny układ za pomocą grid-template-areas, a następnie precyzyjnie umieszczać inne elementy wewnątrz tych obszarów lub względem nich, używając niejawnych nazwanych linii.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "cont cont"
    "foot foot";
}

.special-item {
  /* Umieść od początku obszaru 'cont' do końca obszaru 'cont' w pionie */
  grid-column: cont-start / cont-end; 
  /* Umieść w pierwszym wierszu obszaru 'cont' */
  grid-row: cont-start / span 1; 
}