Grid (CSS Grid)

Grid, a dokładniej CSS Grid Layout, to potężny, dwuwymiarowy system tworzenia układów w CSS, który pozwala rozmieszczać elementy strony jednocześnie w kolumnach i wierszach. W odróżnieniu od wcześniejszych technik opartych na pływających elementach czy pozycjonowaniu, Grid został zaprojektowany od podstaw z myślą o budowaniu złożonych układów — od prostych siatek produktów po rozbudowane szablony z nagłówkiem, panelem bocznym i stopką. Dziś obsługują go wszystkie nowoczesne przeglądarki.

Jak działa CSS Grid?

Grid opiera się na relacji między kontenerem a jego bezpośrednimi dziećmi. Element rodzica staje się siatką po nadaniu mu display: grid, a wewnątrz definiuje się jej strukturę:

• grid-template-columns / grid-template-rows — deklarują liczbę i rozmiar kolumn oraz wierszy; można używać jednostki fr (frakcja wolnej przestrzeni), pikseli, procentów czy funkcji minmax().
• gap — ustawia odstępy między komórkami bez marginesów na elementach.
• grid-template-areas — pozwala nazwać obszary siatki i przypisać do nich elementy, co czyni kod czytelnym niczym mapa układu.
• Pozycjonowanie — poszczególne elementy mogą rozciągać się na wiele kolumn i wierszy dzięki właściwościom grid-column i grid-row.

Warto pamiętać, że Grid i Flexbox to narzędzia komplementarne — Grid odpowiada za dwuwymiarowy szkielet strony, Flexbox za jednowymiarowe rozmieszczenie elementów w jego komórkach.

Zastosowanie w praktyce

CSS Grid jest fundamentem nowoczesnego, responsywnego web designu:

1. Układ całej strony — rozmieszczenie nagłówka, treści, panelu i stopki w kilku liniach kodu, bez zagnieżdżonych kontenerów.
2. Galerie i listy produktów — siatki automatycznie dopasowujące liczbę kolumn do szerokości ekranu dzięki auto-fit i minmax().
3. Responsywność — w połączeniu z media queries jedna siatka płynnie przechodzi z układu wielokolumnowego na mobilny jednokolumnowy.

Dzięki temu Grid często zastępuje rozbudowane systemy siatki znane z frameworków CSS, dając większą elastyczność przy mniejszej ilości kodu.