CSS Grid

CSS Grid Layout (często określany po prostu jako Grid) jest dwuwymiarowym systemem układania elementów w HTML przy użyciu arkuszy stylów CSS. Pozwala on definiować zarówno wiersze, jak i kolumny jednocześnie, co odróżnia go od jednowymiarowego modelu Flexbox.

Historia

Pomysł wprowadzenia siatki w CSS sięga wczesnych lat 2010, ale pierwsze stabilne specyfikacje pojawiły się w 2017 roku, kiedy to W3C zatwierdziło CSS Grid Layout Module Level 1. Od tego czasu przeglądarki stopniowo wprowadzały wsparcie, a technika stała się podstawą responsywnego projektowania.

Podstawowe pojęcia

Container (kontener) – element posiadający regułę display: grid lub display: inline-grid, w którym definiuje się siatkę.
Item (element) – bezpośrednie potomki kontenera, które są rozmieszczane w siatce.
Track (ścieżka) – pojedynczy wiersz lub kolumna.
Grid line (linia siatki) – granica oddzielająca dwa tracki; numerowana od początku i końca.
Grid area (obszar siatki) – prostokąt utworzony przez zbiór tracków.

Składnia

Podstawowe deklaracje wyglądają następująco:

/* Definicja kontenera */
.container {
    display: grid;                     /* włączenie trybu siatki */
    grid-template-columns: 1fr 2fr;     /* dwie kolumny – proporcje 1:2 */
    grid-template-rows: 100px auto;     /* dwa wiersze – stała wysokość i automatyczna */
    gap: 10px;                          /* odstęp między komórkami */
}

/* Pozycjonowanie elementu */
.item-a {
    grid-column: 1 / 3;                 /* rozciąga się od linii 1 do linii 3 */
    grid-row: 2;                        /* umieszcza w drugim wierszu */
}

Najważniejsze własności

Właściwość	Opis	Przykład
`display: grid`	Aktywuje tryb siatki.	container { display: grid; }
`grid-template-columns`	Definiuje liczbę i szerokość kolumn.	grid-template-columns: 200px 1fr 2fr;
`grid-template-rows`	Definiuje liczbę i wysokość wierszy.	grid-template-rows: 100px auto;
`gap` (lub `grid-gap`)	Ustawia odstępy pomiędzy wierszami i kolumnami.	gap: 20px;
`grid-area`	Jednocześnie określa położenie wiersza i kolumny.	grid-area: 1 / 2 / 3 / 4;
`justify-items`	Wyrównanie elementów wzdłuż osi kolumn (poziomo).	justify-items: center;
`align-items`	Wyrównanie elementów wzdłuż osi wierszy (pionowo).	align-items: start;
`grid-auto-flow`	Określa kolejność automatycznego rozmieszczania elementów.	grid-auto-flow: dense;

Przykładowe zastosowania

Za pomocą CSS Grid można łatwo stworzyć klasyczne układy:

Układ magazynu – nagłówek, pasek boczny, główna treść, stopka.
Responsive gallery – siatka zdjęć, w której liczba kolumn zmienia się w zależności od szerokości ekranu.
Formularze wielokolumnowe – pola rozciągające się na kilka kolumn.

Współpraca z innymi technikami

CSS Grid nie wyklucza użycia Flexbox. Często łączy się je w jednym projekcie: Grid określa ogólną strukturę strony, a Flexbox służy do precyzyjnego rozmieszczania elementów w pojedynczych komórkach.

Wsparcie przeglądarek

Obecnie pełne wsparcie dla CSS Grid posiadają najnowsze wersje przeglądarek:

Google Chrome (od wersji 57)
Mozilla Firefox (od wersji 52)
Microsoft Edge (od wersji 16)
Safari (od wersji 10.1)
Opera (od wersji 44)

Starsze przeglądarki, takie jak Internet Explorer 11, obsługują jedynie przestarzałą wersję IE10 Grid, dlatego zaleca się stosowanie prefiksów lub fallbacków w projektach skierowanych do nich.