Układ Świętego Graala z Grid

Układ Holy Grail to klasyczny wzorzec projektowania stron internetowych: strona o pełnej wysokości z nagłówkiem, stopką i środkową sekcją z trzema kolumnami (lewy pasek boczny, główna treść, prawy pasek boczny). Jego implementacja za pomocą floatów była niesławnie trudna, natomiast CSS Grid znacznie ją upraszcza.

Układ należy zdefiniować za pomocą nazwanych obszarów szablonu i wierszy: grid-template-areas odwzorowuje strukturę wizualną. Trzy kolumny i trzy wiersze (nagłówek rozciągnięty na wszystkie kolumny, stopka rozciągnięta na wszystkie kolumny oraz środkowy wiersz z trzema kolumnami) opisują cały układ w czytelnym diagramie ASCII.

Każdy element potomny odwołuje się do swojego obszaru za pomocą nazwy: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid umieszcza je automatycznie.

Środkowy wiersz używa 1fr, które wypełnia całą pozostałą wysokość obszaru roboczego po uwzględnieniu nagłówka i stopki o stałej wysokości. Dzięki temu paski boczne i główna treść zawsze rozciągają się, aby wypełnić obszar roboczy — nie trzeba jawnie obliczać wysokości.

Na urządzeniach mobilnych należy użyć media query i ponownie zdefiniować grid-template-areas jako jednokolumnowy stos: nagłówek, pasek boczny, główna treść, aside i stopka są ułożone pionowo. Kolejność w DOM pozostaje bez zmian; zmienia się tylko wizualny szablon siatki. Obszary Grid ułatwiają czytelne przebudowywanie układu responsywnego.

Na tabletach usuń prawy aside i rozszerz główną treść: zdefiniuj ponownie układ jako "header header" "sidebar main" "footer footer" z grid-template-columns: 240px 1fr. Ustaw aside { display: none } albo przenieś go pod główną treść w definicji obszarów.

Dodaj odstęp między ścieżkami siatki za pomocą gap: var(--spacing-4). Padding stosuj wewnątrz poszczególnych obszarów, a nie na kontenerze siatki, aby zachować spójne odstępy. Nagłówek i stopka zazwyczaj otrzymują własny poziomy padding dopasowany do wyrównania maksymalnej szerokości siatki.

Obszar głównej treści może sam być siatką — na przykład dwukolumnowym układem artykułu i paska bocznego wewnątrz głównego obszaru. Zagnieżdżone siatki tworzą układ treści wewnątrz układu powłoki strony bez złożonych hierarchii klas ani głęboko zagnieżdżonego pozycjonowania.

Przyklej nagłówek za pomocą header { position: sticky; top: 0; z-index: 10; }. W układzie opartym na Gridzie pozycjonowanie sticky elementu potomnego siatki działa zgodnie z oczekiwaniami — nagłówek pozostaje przyklejony, gdy główna treść, pasek boczny i aside przewijają się pod nim.

Oba paski boczne mogą być przyklejone: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Pozostają widoczne podczas przewijania głównej treści, tworząc układ z trzema panelami, w którym przewija się tylko środkowy.

Grid należy stosować do dwuwymiarowych układów powłoki strony, takich jak Holy Grail — Grid doskonale umieszcza elementy jednocześnie w nazwanych wierszach i kolumnach. Flexbox należy stosować do jednowymiarowych układów komponentów (elementy nawigacji w wierszu, zawartość karty w kolumnie) wewnątrz obszarów siatki.

Co sprawia, że grid-template-areas jest szczególnie przydatne w responsywnych układach Holy Grail?

CSS Grid upraszcza historycznie trudny układ Holy Grail: grid-template-areas nadaje nazwy regionom, 1fr w środkowym wierszu wypełnia wysokość obszaru roboczego, a media queries ponownie definiują mapę obszarów na potrzeby responsywnego zwijania. Przyklejane nagłówki i paski boczne można dodać bez dodatkowej złożoności.