Grid Layout w CSS
CSS Grid Layout to nowoczesny system układu stron, który pozwala w prosty sposób budować złożone siatki i responsywne układy. W przeciwieństwie do Flexboxa, który działa głównie w jednym wymiarze (rząd lub kolumna), Grid działa w dwóch wymiarach jednocześnie – kolumny i wiersze.
1. Podstawy grida (display: grid)
Aby utworzyć siatkę, należy ustawić kontenerowi właściwość:
- Grid container – element nadrzędny z
display: grid. - Grid items – wszystkie bezpośrednie dzieci kontenera.
Domyślnie elementy są układane w rzędach, ale nie mają jeszcze określonej liczby kolumn czy wierszy.
2. Definiowanie kolumn i wierszy
Do określania układu siatki służą właściwości:
a) grid-template-columns / grid-template-rows
Definiują liczbę i rozmiary kolumn oraz wierszy.
Tworzy siatkę:
- 3 kolumny (100px, 200px, reszta miejsca),
- 2 wiersze po 150px.
b) Jednostki w gridzie
- px – stała szerokość, np.
200px. - % – procent dostępnej przestrzeni.
- fr (fraction) – podział przestrzeni na części ułamkowe.
- auto – dopasowanie do zawartości.
- repeat() – skrót do powtarzania kolumn/wierszy.
c) Gap
Odstępy między kolumnami i wierszami:
Lub osobno:
3. Obszary siatki (grid-area)
Każdy element w gridzie może być rozmieszczony w konkretnym miejscu siatki.
a) Pozycjonowanie ręczne
b) grid-area – skrót
c) Nazwane obszary
Można zdefiniować układ w bardziej czytelny sposób:
Układ przypomina makietę strony: nagłówek, sidebar, treść i stopka.
4. Zaawansowane układy z Gridem
a) Justify i align
justify-items– wyrównanie w poziomie (start,center,end,stretch).align-items– wyrównanie w pionie.place-items– skrót dla obu.
Dla całego kontenera:
Dla pojedynczego elementu:
b) Auto-fit i auto-fill
Używane do automatycznego dopasowania liczby kolumn:
Tworzy elastyczną siatkę, która „łamię się” responsywnie.
c) Grid + Flexbox
Często używa się Grida do układu ogólnego strony, a Flexboxa do układania elementów wewnątrz poszczególnych bloków.
d) Alignment całego grida
Można ustawić położenie całej siatki w kontenerze:
5. Przykład – Layout strony
W kilka linijek CSS można stworzyć przejrzysty layout strony.