CSS Grid Layout

CSS Grid Layout (układ siatkowy CSS) to technologia tworzenia układów elementów na stronie internetowej na podstawie dwuwymiarowego modelu siatki. Została stworzona po to, aby umożliwić łatwe tworzenie zarówno prostych, jak i skomplikowanych, układów stron bez uciekania się do przestarzałych lub niepewnych metod, które służą do innych celów.

Na przykład, jeszcze do niedawna do tworzenia układów stron często wykorzystywano elementy pływające czy pozycjonowanie CSS, a dawniej używano do tego celu tabele. Obecnie wszystkie te techniki można zastąpić jednym spójnym systemem o nazwie CSS Grid.

Oczywiście zarówno elementy pływające, jak i pozycjonowanie CSS, to pełnoprawne techniki CSS, których jak najbardziej nadal można używać, ale nie zostały one stworzone z myślą o tworzeniu układów stron internetowych.

Obecnie w CSS dostępne są trzy metody tworzenia układów: układy wielokolumnowe, CSS Flexbox oraz CSS Grid.

Układy wielokolumnowe CSS służą do przedstawiania treści wybranych elementów w kolumnach przypominających łamy gazety, co czyni je czytelniejszymi dzięki zmniejszeniu szerokości.

Technologia CSS Flexbox służy do tworzenia jednowymiarowych układów elementów, czyli do rozmieszczania ich wzdłuż jednej osi — poziomej lub pionowej. Poniższy rysunek przedstawia w różnych kolorach typowe przypadki, w których odpowiednie byłoby użycie CSS Flexbox.

Z kolei CSS Grid służy do rozmieszczania elementów na bazie dwuwymiarowej siatki, a więc w rzędach i kolumnach jednocześnie. Daje to większe możliwości w zakresie panowania nad układem elementów na stronie i pozwala na definiowanie zarówno bardzo prostych, jak i kompletnych, nawet bardzo złożonych, układów. Poniższy rysunek przedstawia typowy przykład zastosowania technologii CSS Grid.

W tym rozdziale kursu CSS szczegółowo poznasz technologię CSS Grid. Dowiesz się, czym jest i jak utworzyć kontener grid, jak zdefiniować siatkę kolumn i wierszy, w celu rozmieszczenia na niej elementów znajdujących się w kontenerze, jakie własności CSS wchodzą w skład technologii CSS Grid i wiele więcej. Zaczniemy oczywiście od podstaw, czyli od zapoznania się z paroma najważniejszymi pojęciami.

Podstawowe pojęcia CSS Grid

Jak już wiesz, w układzie CSS Grid elementy są rozmieszczane na planie siatki (ang. grid) złożonej z przecinających się poziomych i pionowych linii, które tworzą rodzaj układu współrzędnych do pozycjonowania elementów znajdujących się w nadrzędnym kontenerze zwanym kontenerem siatki.

Kontener siatki, albo kontener grid (ang. grid container), to element, którego zawartość jest rozmieszczana według zasad modelu CSS Grid Layout. Zawiera on tzw. jednostki siatki.

Jednostka siatki, albo jednostka grid (ang. grid item), to każdy element, który jest bezpośrednim potomkiem (dzieckiem) kontenera siatki. Jednostki siatki można rozmieszczać na siatce reprezentowanej przez kontener na różne sposoby za pomocą specjalnego zestawu własności z modułu CSS Grid Layout. Jeden z tych sposobów opiera się na wykorzystaniu linii siatki.

Linie siatki (ang. grid line) to pionowe i poziome proste tworzące matrycę, na której można rozmieszczać elementy (jednostki siatki). Są one bardzo ważne, ponieważ na nich opiera się budowa wszystkich pozostałych składników układu. Spójrz na poniższą ilustrację, na której zaznaczono je i kilka innych elementów układu CSS Grid.

Ta ilustracja przedstawia kontener siatki, zawierający dziewięć jednakowych elementów oznaczonych literami od A do I. Siatkę tę tworzą poziome i pionowe linie o numerach od 1 do 4 w każdym wymiarze. Przestrzeń znajdująca się między dwiema sąsiednimi liniami nazywa się ścieżką siatki.

Ścieżka siatki (ang. grid track) to obszar, który znajduje się między dowolnymi dwiema bezpośrednio sąsiadującymi ze sobą równoległymi liniami siatki. Na schemacie przykładowa ścieżka siatki została oznaczona kolorem pomarańczowym. Ponadto ścieżkami siatki są też m.in. obszary między 1 i 2 linią pionową, między 2 i 3 linią pionową, między 3 i 4 linią poziomą itd. Mówiąc prościej, ścieżka siatki to po prostu jej kolumna lub wiersz.

Oprócz ścieżek, linie wyznaczają także granice obszarów i komórek siatki.

Komórka siatki (ang. grid cell) to obszar znajdujący się na przecięciu kolumny i wiersza siatki, czyli najmniejszy możliwy obszar otoczony z czterech stron liniami siatki. Na powyższym schemacie przykładowa komórka została oznaczona kolorem zielonym. Poza tym, komórkami są wszystkie prostokąty oznaczone literami od A do I.

Obszar siatki (ang. grid area) to prostokątny obszar obejmujący jedną lub większą liczbę przylegających do siebie komórek siatki, tworzących prostokąt. Na schemacie przykładowy obszar został oznaczony kolorem różowym i obejmuje komórki D, E, G oraz H.

Ponieważ nas interesują przede wszystkim teksty w języku polskim, dla uproszczenia przyjmiemy, że obowiązują ustawienia domyślne dla dokumentów w tym języku — oś śródliniowa jest pozioma i zaczyna się z lewej strony, a oś blokowa jest pionowa i zaczyna się od góry.

Po teoretycznym zapoznaniu się z podstawowymi pojęciami dotyczącymi technologii CSS Grid Layout możemy przejść do praktyki. Pierwszą czynnością przy tworzeniu układu siatkowego jest naturalnie utworzenie kontenera siatki.

Tworzenie kontenera siatki

Aby utworzyć kontener siatki, należy wybranemu elementowi (na przykład div) przypisać własność display o wartości grid albo inline-grid. Pierwsza z nich tworzy blokowy kontener siatki, a druga — śródliniowy kontener siatki, np.:

.grid-container {
  display: grid;
}

Ta deklaracja CSS zamienia każdy element należący do klasy .grid-container w kontener siatki. Na razie jednak nie wywoła to żadnego widocznego efektu, ponieważ domyślnie przeglądarka utworzy układ siatkowy składający się z jednej kolumny i odpowiedniej liczby wierszy. Weźmy na przykład poniższy fragment dokumentu HTML:

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Gdybyśmy teraz go obejrzeli w oknie przeglądarki, to zobaczylibyśmy tylko pionowy słupek cyfr od 1 do 6, czyli dokładnie to samo, co ukazałoby się nam, gdybyśmy nie zamienili nadrzędnego elementu div w kontener siatki.

Utworzenie tego kontenera to dopiero pierwszy krok przy tworzeniu układu siatkowego. Drugim jest zdefiniowanie kolumn i wierszy.

Kolumny i wiersze siatki

Kiedy utworzymy kontener siatki, to wszystkie elementy będące jego bezpośrednimi potomkami automatycznie staną się jednostkami siatki. Naszą rolą jest odpowiednio nimi rozporządzić, aby ułożyły się w pożądany przez nas sposób na tej siatce.

Zanim jednak zaczniemy definiować wiersze i kolumny, musisz zrozumieć jedną bardzo ważną rzecz na temat układów siatkowych. W układach tych elementy HTML są oddzielone od wirtualnej siatki definiowanej za pomocą własności CSS. Praca nad układem polega na zdefiniowaniu prostokątnej siatki, a następnie na rozmieszczeniu na jej powierzchni określonego zbioru elementów.

Jeśli na przykład zdefiniujemy siatkę złożoną z dwóch kolumn i dwóch wierszy, to otrzymamy cztery komórki. To nie oznacza, że możemy w niej umieścić tylko dokładnie cztery elementy, po jednym na komórkę. Możemy na przykład sprawić, że obszar lewej górnej i lewej dolnej komórki zajmie jeden element, a obszar prawej górnej i prawej dolnej komórki zajmie drugi element. W ten sposób na czterokomórkowej siatce uzyskamy układ dwóch kolumn.

Wirtualna siatka

Praca nad układem CSS Grid polega na tym, że najpierw za pomocą CSS definiujemy siatkę, a następnie na tę siatkę nakładamy elementy HTML.

Nad ich rozmieszczeniem możemy w pełni zapanować, posługując się przeznaczonymi do tego celu własnościami CSS. Ewentualnie możemy pozwolić na ich rozmieszczenie domyślnym algorytmom przeglądarki, które po prostu będą zapełniać po kolei kolejne komórki siatki.

Poniższa ilustracja przedstawia przykładową „wirtualną” siatkę utworzoną przez przeglądarkę Firefox, którą podejrzałem za pomocą narzędzia Grid Inspector z Narzędzi dla twórców witryn tej przeglądarki.

Ta siatka została utworzona przez Firefoksa dla poniższego kodu HTML:

<div class="grid-container">
</div>

Jak widać, jest to pusty kontener, a mimo tego w pamięci wirtualnej przeglądarki powstała już odpowiednia siatka. Pamiętaj o jej istnieniu, kiedy będziesz pracować nad rozmieszczeniem swoich elementów.

Tworzenie kolumn i wierszy

Najprostszym sposobem na utworzenie kolumn i wierszy siatki układu CSS Grid jest użycie odpowiednio własności grid-template-columns i grid-template-rows. Obie przyjmują takie same wartości, do których zaliczają się między innymi liczby z jednostką długości CSS, wartości procentowe, słowa kluczowe, nowa jednostka długości o nazwie fr, czy funkcje repeat() i minmax().

Do trzech ostatnich z wymienionych wartości jeszcze wrócimy — są łatwe w użyciu i bardzo praktyczne, więc warto je znać. Na razie jednak dla ułatwienia posłużymy się doskonale znanymi wszystkim pikselami.

Powiedzmy, że chcemy zdefiniować dokładnie taką samą siatkę, jak pokazana na poprzednim zrzucie ekranu. To bardzo proste. W tym celu użyjemy własności grid-template-columns i grid-template-rows w następujący sposób:

.grid-container {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px 80px 80px 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
}

To wszystko. W ten sposób utworzyliśmy interesującą nas siatkę, która na razie jest obecna tylko w pamięci wirtualnej przeglądarki i normalnie nie jest widoczna — można ją ukazać na przykład za pomocą narzędzia Grid Inspector przeglądarki Firefox.

Za pomocą własności grid-template-columns utworzyliśmy dziewięć kolumn o szerokości 80 pikseli każda, a za pomocą własności grid-template-rows utworzyliśmy trzy wiersze o wysokości 80 pikseli każdy. Krótko mówiąc, pierwsza własność definiuje liczbę i szerokość kolumn, a druga — liczbę i wysokość wierszy siatki.

Mamy więc gotową siatkę, na której będziemy rozmieszczać nasze elementy. W najprostszym możliwym przypadku możemy utworzyć parę elementów w kontenerze siatki i pozwolić przeglądarce rozmieścić je automatycznie. Na przykład:

Przeglądarka domyślnie będzie wypełniać elementami kolejne komórki siatki. Wypełni ich tyle, ile będzie miała elementów, a pozostałe pozostawi puste. Widać to na poniższej ilustracji:

Oczywiście komórki siatki nie muszą być kwadratowe (mogą mieć kształt dowolnego prostokąta) oraz nie muszą mieć wszystkie takiej samej szerokości ani wysokości. Ponadto można dowolnie mieszać różne typy wartości. Spójrz na poniższy przykład:

grid-template-columns: 120px 15% 6em 12rem;
grid-template-rows: 7em 60px 7rem 100px;

Ten przykład ma niewiele sensu, ale chodzi w nim tylko o to, aby pokazać, że mieszanie różnych jednostek jest dozwolone. Na stronie Jednostki i typy wartości CSS znajdziesz szczegółowy opis wszystkich jednostek dostępnych w CSS.

Wiemy już, jak utworzyć siatkę, aby przeglądarka automatycznie umieściła w jej komórkach nasze elementy. To jednak jeszcze za mało do tworzenia „prawdziwych” układów całych stron lub ich części. Na razie możemy co najwyżej stworzyć sztywną matrycę prostokątów. Trudno by jednak było wygodnie stworzyć choćby taki układ, jak pokazany na początku tego rozdziału.

Z problemem braku elastyczności poradzimy sobie bardzo łatwo przez zastosowanie jednostek zapewniających elastyczność, takich jak procenty lub fr, która została zdefiniowana na potrzeby układów CSS Grid. Wartości procentowych nie trzeba objaśniać, więc teraz przyjrzymy się jednostce fr.

Jednostka fr w CSS Grid

Jednostka długości fr działa bardzo podobnie do własności flex-grow i flex-shrink z układu CSS Flexbox. Jest współczynnikiem, który określa, jaka ilość wolnego miejsca dostępnego w kontenerze siatki ma zostać przeznaczona dla danej kolumny lub dla danego wiersza.

Powiedzmy na przykład, że na stronie mamy kontener siatki, którego obecna szerokość wynosi 1200 pikseli, i w którym utworzyliśmy trzy kolumny, jak widać poniżej:

.grid-container {
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: 50px 50px 50px;
}

W tym przypadku przeglądarka najpierw podzieli całą dostępną przestrzeń w wymiarze poziomym (1200 pikseli) na 6 równych części, ponieważ tyle wynosi suma wartości z jednostką fr we własności grid-template-columns. Będzie to oznaczało, że szerokość jednej części wynosi 200 pikseli (bo 1200 ÷ 6 = 200).

Następnie każdej kolumnie przeglądarka „przydzieli” tyle części, ile wynosi jej wartość z jednostką fr:

• Pierwsza kolumna (3fr) — 3 × 200 pikseli = 600 pikseli
• Druga kolumna (2fr) — 2 × 200 pikseli = 400 pikseli
• Trzecia kolumna (1fr) — 1 × 200 pikseli = 200 pikseli

W efekcie otrzymamy kolumny, o szerokości 600, 400 i 200 pikseli. Kiedy zmieni się szerokość okna, to przeglądarka proporcjonalnie zmieni szerokość tych kolumn, tak że zawsze pierwsza będzie miała trzy z sześciu części, druga — dwie, a trzecia — jedną. Poniższy zrzut ekranu przedstawia opisywaną siatkę w rozmiarze 1200 pikseli.

Gdyby szerokość okna przeglądarki wzrosła do 2100 pikseli, to pierwsza kolumna miałaby szerokość 1050 pikseli, druga — 700 pikseli, a trzecia — 350 pikseli.

Jednostkę fr można też mieszać z innymi jednostkami.

Mieszanie jednostki fr z jednostkami sztywnymi

Jeśli chcemy, aby niektóre wiersze lub kolumny miały stałą szerokość lub wysokość, a pozostałe zajmowały resztę dostępnej wolnej przestrzeni, to możemy użyć jednostki fr w połączeniu z którąś z jednostek „sztywnych”, np.:

.grid-container {
  display: grid;
  grid-template-columns: 400px 1fr 1fr;
  grid-template-rows: 50px 50px 50px;
}

Jeśli ten kontener siatki będzie miał szerokość 1000 pikseli, to pierwsza kolumna będzie miała szerokość 400 pikseli, a pozostałe dwie — po 300 pikseli, ponieważ 600 pikseli pozostałe po odjęciu szerokości pierwszej kolumny zostanie po równo rozdzielone między dwie pozostałe kolumny.

Siatka jawna i niejawna

Siatka tworzona za pomocą własności grid-template-rows, grid-template-columns oraz, opisanej nieco dalej, grid-template-areas, to tzw. siatka jawna (ang. explicit grid). Jej cechą charakterystyczną jest to, że jest tworzona wprost przez projektanta za pomocą konkretnych własności CSS.

Oprócz tego istnieje jeszcze siatka niejawna (ang. implicit grid), która powstaje wtedy, gdy umieścimy jednostki siatki poza siatką jawną. Jeśli na przykład siatka ma trzy kolumny, a my umieścimy element w 6 kolumnie, to przeglądarka automatycznie wygeneruje dodatkowe kolumny siatki niejawnej.

Niejawne kolumny i wiersze

Jeśli po utworzeniu siatki pozwolimy przeglądarce wstawić do niej elementy automatycznie, to przy domyślnych ustawieniach będzie ona wypełniać komórki po kolei, to znaczy, w pierwszej komórce umieści pierwszy element będący bezpośrednim potomkiem kontenera, w drugiej — drugi itd.

Jeśli tych elementów będzie za mało, to odpowiednia liczba komórek na końcu po prostu pozostanie pusta. Kiedy natomiast będzie ich za dużo, to przeglądarka utworzy wiersze niejawne (ang. implicit row), czyli dodatkowe rzędy komórek niezbędne do pomieszczenia wszystkich elementów.

Powiedzmy na przykład, że za pomocą własności grid-template-columns i grid-template-rows utworzyliśmy jeden wiersz siatki z trzema kolumnami.

.grid-container {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  grid-template-rows: 50px;
}

W tę siatkę próbujemy wpasować następujące elementy:

W siatce jawnej są tylko trzy komórki, a elementów mamy cztery, więc przeglądarka automatycznie utworzy dodatkowy wiersz niejawny, aby pomieścić je wszystkie. Spójrz na poniższy zrzut ekranu.

Mimo że w regule CSS zdefiniowany jest tylko jeden wiersz, przeglądarka utworzyła dwa wiersze, ponieważ potrzebowała dodatkowego miejsca na jeden „nadmiarowy” element div obecny w kontenerze.

Domyślnie niejawnie utworzonym wierszom i kolumnom nadawany jest minimalny rozmiar treści, o którym w uproszczeniu można powiedzieć, że odpowiada długości najkrótszego słowa w treści danego elementu.

W razie potrzeby można jednak nadać im dowolny rozmiar. Służą do tego własności grid-auto-columns i grid-auto-rows. Wracając do omawianego przykładu, powiedzmy, że chcemy, aby wszystkie niejawne wiersze w naszej siatce, tak samo, jak jawne, miały wysokość 50 pikseli. W tym celu dodajemy do naszej reguły następującą deklarację:

.grid-container {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  grid-template-rows: 50px;
  grid-auto-rows: 50px;
}

Po wprowadzeniu tej zmiany nasza siatka wygląda tak:

Kontrolowanie algorytmu automatycznego dodawania wierszy i kolumn siatki

W opisanym powyżej przykładzie przeglądarka automatycznie tworzy dodatkowy wiersz, aby zmieścić w siatce wszystkie elementy zdefiniowane w jej kontenerze.

Nie zawsze jednak o to chodzi projektantowi. Jeśli chcesz mieć pełną kontrolę nad sposobem działania przeglądarkowego algorytmu automatycznego dodawania wierszy i kolumn siatki, to możesz użyć własności grid-auto-flow.

Przyjmuje ona wartości row, column i dense, które odpowiednio nakazują przeglądarce tworzyć niejawne wiersze lub kolumny albo „upychać” elementy w najbliższych wolnych miejscach.

Wrócimy po raz kolejny do poprzedniego przykładu i sprawimy, że tym razem nadmiarowy element przeglądarka umieści w niejawnej kolumnie, a nie w niejawnym wierszu.

.grid-container {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  grid-template-rows: 50px;
  grid-auto-flow: column;
  grid-auto-columns: 2fr;
}

Efekt wprowadzenia tych zmian jest następujący:

Niejawne wiersze i kolumny mogą być tworzone przez przeglądarkę w kilku różnych sytuacjach. Później poznasz jeszcze inne.

W następnej sekcji przejdziemy od teorii do praktyki, czyli poznasz metody rozmieszczania elementów na siatce. Zaczniemy od określania ich położenia według linii siatki.

Rozmieszczanie elementów wg linii siatki

Na rysunku przedstawiającym podstawowe pojęcia technologii CSS Grid zaznaczyłem osiem linii siatki: cztery pionowe i cztery poziome. Nie określa się ich ręcznie, tylko są one automatycznie generowane przez przeglądarkę, kiedy definiujemy ścieżki siatki (dla uproszczenia w tym artykule nazywane kolumnami i wierszami).

Dla wygody poniżej zamieszczam jeszcze raz ten sam rysunek, w lekko odchudzonej wersji.

Te numerowane linie można wykorzystywać jako punkty odniesienia przy rozmieszczeniu elementów na siatce. Powiedzmy na przykład, że mamy kontener siatki CSS Grid o następującej definicji:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

Ta reguła CSS definiuje siatkę o wymiarach 4 × 4, czyli cztery kolumny i cztery wiersze. Ich granice wyznacza po pięć pionowych i poziomych linii o automatycznie nadanych przez przeglądarkę numerach od 1 do 5. Przedstawia ją poniższy zrzut ekranu.

Posługując się numerami linii, na tej siatce możemy rozmieścić dowolną liczbę elementów HTML (jeśli będzie ich „za dużo”, to przeglądarka utworzy kolumny lub wiersze niejawne) i nie musimy trzymać się zasady „jedna komórka, jeden element”.

Możemy na przykład sprawić, że jeden z elementów będzie zajmował obszar między 1. a 3. linią pionową oraz między 1. a 3. linią poziomą. Albo możemy sprawić, że inny element będzie obejmował obszar znajdujący się między 4. a 5. linią pionową oraz między 1. a 5. linią poziomą itd. Spójrz na poniższy przykładowy kontener HTML:

Choć mamy tu tylko cztery elementy div, to możemy nimi „zapełnić” całą siatkę albo dowolną jej część. Powiedzmy na przykład, że pierwszy element (item1) ma zajmować obszar między 3. a 5. pionową linią oraz między 1. a 4. poziomą linią naszej siatki, jak widać na poniższej ilustracji.

Taki efekt pozwalają uzyskać następujące własności:

• grid-column-start — numer pionowej linii początkowej
• grid-column-end — numer pionowej linii końcowej
• grid-row-start — numer poziomej linii początkowej
• grid-row-end — numer poziomej linii końcowej

Definicja powyższego zielonego obszaru wygląda więc tak:

.item1 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4;
  background-color: green;
}

Teraz dodamy kolejny element:

.item2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  background-color: lightpink;
}

W tym przypadku zwróć uwagę na brak deklaracji własności grid-row-end. Kiedy deklaracja linii końcowej zostanie pominięta, to domyślnie brana jest następna linia po wskazanej przez deklarację linii początkowej. W związku z tym nasz drugi element będzie zajmował miejsce między 3. a 4. linią poziomą, jak widać na poniższym rysunku.

Pozostałymi dwoma elementami można wypełnić pozostałe dwie puste przestrzenie, ale pozostawiam to już jako ćwiczenie do samodzielnego wykonania. Jeśli nic z nimi nie zrobisz, to ich położenie zostanie określone według zasad automatycznego rozmieszczenia, czyli zajmą dwie pierwsze wolne komórki siatki.

Odliczanie od tyłu

Do linii siatki można odnosić się także od końca przez użycie wartości ujemnych. Na przykład wartość -1 oznacza pierwszą linię w danej orientacji od końca, -2 — drugą itd. Spójrz na poniższy przykład:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(4, 70px);
}
.item {
  grid-column: -1 / -3;
  grid-row: -3 / -4;
  background-color: green;
}

Ta jednostka grid w pionie będzie obejmować obszar od 1. do 3. linii od końca oraz od 3. do 4. wiersza od końca, jak widać na poniższym zrzucie ekranu:

Innymi słowy, wartość 1 oznacza pierwszą linię siatki w danym wymiarze, a wartość -1 oznacza ostatnią linię siatki w danym wymiarze. Dzięki temu w łatwy sposób można sprawić, aby element obejmował całą powierzchnię siatki w wybranym wymiarze, np.:

grid-row: 1 / -1;

Ta deklaracja rozciąga element na całą wysokość siatki.

Określanie liczby obejmowanych ścieżek siatki

Rozpiętość elementów na siatce można określać także za pomocą słowa kluczowego span, które określa liczbę obejmowanych przez nie ścieżek siatki. Słowo to jest obsługiwane przez wszystkie opisane w tej sekcji własności do rozmieszczania elementów wg linii siatki, np.:

grid-column: 1 / span 3;

Ta deklaracja oznacza, że początek elementu wyznacza pierwsza linia pionowa oraz że obejmuje on trzy ścieżki kolumnowe siatki, a więc sięga do pionowej linii o numerze 4. Poniższa deklaracja znaczy dokładnie to samo:

grid-column: 1 / 4;

Jeszcze inny sposób zapisu tego samego:

grid-column-start: 1;
grid-column-end: 4;

Ewentualnie można też tak:

grid-column-start: 1;
grid-column-end: span 3;

Tworzenie niejawnych kolumn przez przeglądarkę

Teraz wrócimy na chwilę do tematu niejawnych kolumn. We wcześniej sekcji pokazałem tylko konkretny przykład sytuacji, w której przeglądarka tworzy niejawne wiersze. Teraz pokażę Ci, jak sprawić, aby przeglądarka automatycznie utworzyła niejawne kolumny. Można ją do tego zmusić przez ustawienie położenia elementu kontenera między liniami kolumn o numerach większych niż są dostępne w siatce jawnej. Na przykład:

.grid-container {
  display: grid;  
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 1fr;
}

Następnie definiujemy takie położenie elementu na tej siatce:

.item1 {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: green;
}

Mimo że siatka zawiera tylko dwie kolumny, czyli ma 3 pionowe linie, my umieściliśmy element item1 między pionowymi liniami o numerach 7 i 8. W efekcie przeglądarka utworzy odpowiednią liczbę dodatkowych kolumn, jak widać na ilustracji.

Nadawanie nazw liniom siatki

Opisane wcześniej własności grid-template-columns i grid-template-rows mają jeszcze jedną funkcję, o której do tej pory nie wspomniałem. Za ich pomocą można nie tylko zdefiniować liczbę i rozmiar kolumn oraz wierszy, ale dodatkowo można nadać nazwy liniom pionowym i poziomym, aby móc się następnie nimi posługiwać w takich własnościach, jak grid-column-start, grid-column-end itd.

Weźmy na przykład poniższą prostą deklarację własności grid-template-columns, która definiuje cztery kolumny o szerokości 100, 200, 300 i 400 pikseli.

grid-template-columns: 100px 200px 300px 400px;

Wartość tej własności (i jej podobnych) wizualnie odzwierciedla rozmieszczenie kolumn. A przypomnę, że granice każdej kolumny wyznaczają dwie linie: z lewej i prawej strony. Czyli można powiedzieć, że gdybyśmy chcieli uwidocznić linie wyznaczające granice kolumn w tej deklaracji, to mogłoby to wyglądać tak:

grid-template-columns: | 100px | 200px | 300px | 400px |;

To nie jest prawidłowy kod CSS, tylko pomocnicza wizualizacja linii wyznaczających granice poszczególnych kolumn. W miejscach tych pionowych kresek możemy wpisać dowolne nazwy, które będą reprezentowały odpowiednie linie siatki. Na przykład w miejscu pierwszej kreski, przed wartością 100px, możemy wpisać nazwę linii siatki o numerze 1, w miejsce drugiej kreski, za wartością 100px, możemy wpisać nazwę linii siatki o numerze 2 itd.

Pamiętaj tylko, że nazwy linii muszą być prawidłowymi identyfikatorami CSS, czyli na przykład nie mogą zawierać spacji, oraz muszą znajdować się w nawiasach kwadratowych, np.:

grid-template-columns: [pierwsza] 100px [druga] 200px [trzecia] 300px [czwarta] 400px [piąta];

Teraz we własnościach takich jak grid-column-start, grid-column-end i inne, w których można używać numerów linii siatki, zamiast tych numerów możemy używać zdefiniowanych przez siebie nazw, np.:

grid-column-start: pierwsza;
grid-column-end: piąta;

Rozmieszczanie elementów wg linii siatki w układzie CSS Grid to nie jedyny sposób pracy z tego typu układami. Istnieje jeszcze metoda polegająca na definiowaniu nazwanych obszarów, którą zajmiemy się teraz.

Obszary nazwane

Jak już wiesz, obszar siatki to jedna lub więcej przylegających do siebie komórek tworzących prostokątną strukturę otoczoną z czterech stron liniami siatki. Na przykład na poniższym rysunku jest zaznaczonych pięć takich obszarów. które reprezentują często spotykany ramowy schemat budowy wielu stron internetowych:

Taki układ CSS Grid z łatwością można utworzyć nie tylko za pomocą technik rozmieszczania elementów wg linii siatki, ale także przy użyciu techniki opartej na definiowaniu nazwanych obszarów, która ma bardziej wizualny charakter i wielu osobom może się wydawać bardziej intuicyjna. Początek pracy w obu przypadkach tak samo.

Definiowanie obszarów nazwanych

Powiedzmy na przykład, że chcemy, aby nasz układ miał maksymalną szerokość 1200 pikseli. Przy szerokości maksymalnej nagłówek i stopka będą się rozciągały na całą szerokość, kolumny będą miały po 200 pikseli szerokości, a treść główna — 800.

Aby utworzyć taki układ w CSS Grid, dobrze jest podzielić siatkę na sześć kolumn, ponieważ wartość 1200 dzieli się bez reszty przez 6, dając w wyniku 200. Dzięki temu kolumny boczne będą miały szerokość jednej kolumny, treść główna będzie obejmowała szerokością cztery kolumny, a nagłówek i stopka będą zajmować wszystkie sześć kolumn w swoich wierszach.

Zaczynamy od definicji kontenera siatki:

.grid-container {
  display: grid;
  max-width: 1200px;
  grid-template-columns: repeat(6, 1fr);
}

Mamy już zdefiniowane kolumny i od tego momentu nasza dalsza praca będzie wyglądała inaczej niż w przypadku pozycjonowania według linii siatki.

Teraz musimy zdefiniować obszary, w których odpowiednio rozmieścimy nasze elementy znajdujące się w kontenerze. W tym celu użyjemy własności grid-template-areas, która pozwala na zdefiniowanie czegoś w rodzaju tekstowego szablonu reprezentującego układ strony, w którym poszczególne wiersze układu definiuje się w formie szeregów identyfikatorów ujętych w cudzysłowy. Jedna para cudzysłowów obejmuje jeden wiersz układu.

Szablon ten składa się z tylu kolumn, ile zdefiniowaliśmy we własności grid-template-columns. W naszym przypadku jest ich sześć, a pierwszy wiersz w całości jest zajmowany przez nagłówek. W związku z tym musimy zaznaczyć, że nagłówek obejmuje wszystkie sześć kolumn pierwszego wiersza.

Aby to zrobić, wybieramy dowolną nazwę (będącą prawidłowym identyfikatorem CSS) dla obszaru nagłówka, niech będzie ng, i we własności grid-template-areas wpisujemy tę nazwę na wszystkich „pozycjach” wchodzących w skład jego obszaru:

grid-template-areas: "ng ng ng ng ng ng";

W tej deklaracji informujemy przeglądarkę, że obszar nagłówka obejmuje kolumny nr 1, nr 2 itd. To jest nasz pierwszy wiersz. Drugi wiersz zdefiniujemy tak samo, czyli określimy zakresy poszczególnych znajdujących się w nim obszarów za pomocą wymyślonych przez nas identyfikatorów, które umieścimy w drugim cudzysłowie.

Drugi wiersz zawiera lewą kolumnę (nadamy jej nazwę lk) o szerokości 200 pikseli, treść główną (nadamy jej nazwę tg) o szerokości 800 pikseli i prawą kolumnę (nadamy jej nazwę pk) znowu o szerokości 200 pikseli. Pamiętamy, że w naszej siatce o szerokości 1200 pikseli podzielonej na sześć równych części szerokość jednej kolumny wynosi 200 pikseli.

W związku z tym definicja drugiego wiersza będzie wyglądała tak:

"lk tg tg tg tg pk"

Definicję drugiego wiersza możemy dodać do definicji pierwszego po spacji, ale lepiej jest umieścić go równo pod spodem, dzięki czemu definicja w CSS będzie wizualnie odpowiadała rzeczywistemu układowi elementów.

grid-template-areas:
    "ng ng ng ng ng ng"
    "lk tg tg tg tg pk";

Pozostało dodać jeszcze definicję trzeciego wiersza, zawierającego stopkę. Temu obszarowi nadamy nazwę st:

"st st st st st st"

Podsumowując, cała definicja układu naszego kontenera siatki wygląda teraz tak:

.grid-container {
  display: grid;
  width: 1200px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "ng ng ng ng ng ng"
    "lk tg tg tg tg pk"
    "st st st st st st";
}

Pamiętaj, że każdy wiersz musi mieć zdefiniowaną taką samą liczbę komórek. Teraz musimy określić, które elementy będą umieszczone w tych obszarach.

Przypisywanie elementów do obszarów nazwanych

Do przypisywania elementów do obszarów nazwanych siatki służy własność grid-area, która przyjmuje identyfikator zdefiniowany we własności grid-template-columns. Jeśli na przykład chcemy, aby element div przypisany do klasy .header zajmował obszar nagłówka o identyfikatorze ng, to napiszemy następującą regułę CSS:

.header {
    grid-area: ng;
}

W podobny sposób postępujemy z pozostałymi obszarami, czyli przypisujemy do nich wybrane elementy za pomocą własności grid-area:

.column-left {
  grid-area: lk;
}
.column-right {
  grid-area: pk;
}
.main-content {
  grid-area: tg;
}
.footer {
  grid-area: st;
}

Poniższy rysunek przedstawia nasz gotowy układ z ukazanymi liniami siatki i kolorowymi tłami poszczególnych obszarów.

Modyfikowanie układu

Opisywany układ oczywiście można zmodyfikować na wiele sposobów. Na przykład, ktoś może stwierdzić, że kolumny boczne są trochę za wąskie i wolałby, aby miały po 300 pikseli szerokości albo aby jedna miała 200 a druga 300 pikseli szerokości itd. W takim przypadku dobrym pomysłem byłoby podzielenie siatki na 12 kolumn, co pozwoli na precyzyjniejsze kontrolowanie rozmiarów obszarów:

.grid-container {
  display: grid;
  width: 1200px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "ng ng ng ng ng ng ng ng ng ng ng ng"
    "lk lk lk tg tg tg tg tg tg pk pk pk"
    "st st st st st st st st st st st st";
}

Teraz układ wygląda tak:

Ponadto przypomnę, że CSS Grid to układ dwuwymiarowy, więc obszary można definiować w obu wymiarach. Ważne, aby każdy obejmował zwartą grupę komórek tworzącą prostokątny kształt, np.:

grid-template-areas:
    "ng ng ng ng ng ng ng ng ng pk pk pk"
    "lk lk lk tg tg tg tg tg tg pk pk pk"
    "lk lk lk st st st st st st st st st";

Efekt:

Tworzenie pustych obszarów

Aby zdefiniować pusty obszar, w miejscu identyfikatora należy wpisać kropkę (albo dowolną liczbę kropek bez żadnych odstępów). Każda taka grupa kropek oznacza jedną pustą komórkę, np.:

grid-template-areas:
    " .  . ng ng ng ng ng ng ng pk pk pk"
    "lk lk lk tg tg tg tg tg tg pk pk pk"
    "lk lk lk st st st st st st st  .  .";

Kropki, jak również nazwy obszarów, można rozdzielać dowolną liczbą spacji, co czasami przydaje się, ponieważ pozwala odpowiednio wyrównać elementy, jak w powyższym przykładzie. Efekt wprowadzenia tych zmian jest następujący:

Dodając puste miejsca, należy pamiętać, że nie mogą one dzielić na osobne części innych obszarów oraz nie mogą powodować, że inne obszary przestaną mieć prostokątny kształt. Na przykład poniższa deklaracja jest niepoprawna, ponieważ dzieli obszar ng na dwie części:

grid-template-areas: "ng . ng";

Niejawne nazwy linii

Kiedy tworzymy nazwane obszary za pomocą własności grid-template-areas, własność ta dodatkowo dla każdego z tych obszarów automatycznie tworzy dwie pary nazw odnoszących się do ich linii początkowych i końcowych w obu wymiarach. Nazwy te składają się z nazwy obszaru i przyrostka -start (dla linii początkowych) lub -end (dla linii końcowych).

Jeśli na przykład utworzymy obszar o nazwie ng, to własność grid-template-areas automatycznie wygeneruje dla niego po dwie następujące nazwy linii: ng-start i ng-end.

Pierwsza z nich odnosi się do pionowej i poziomej linii początkowej, a druga — do pionowej i poziomej linii końcowej obszaru o nazwie ng. Mimo że nazwy są takie same parami, przeglądarka je rozróżni na podstawie miejsca, w którym zostaną użyte. Jeśli na przykład nazwa ng-start zostanie użyta w deklaracji własności grid-row, to wiadomo, że chodzi o poziomą linię początkową itd. Spójrz na poniższy rysunek:

Na rysunku tym widać cztery obszary nazwane: l-góra, p-góra, l-dół i p-dół. Dla każdego z nich zostały utworzone po dwie pary nazwy linii wyznaczających jego granice w obu wymiarach. Nazwami tymi możemy posługiwać się we własnościach grid-column-start, grid-row-start itd. (we wszystkich, które jako wartość przyjmują nazwy linii siatki), np.:

<div class="grid-container">
  <div class="l-gora">l-góra</div>
  <div class="p-gora">p-góra</div>
  <div class="l-dol">p-dół</div>
  <div class="p-dol">l-dół</div>
  <div class="cover">l-dół</div> 
</div>

To jest kontener siatki pokazany na powyższym rysunku. Do niego stosujemy następujące reguły CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr); 
  grid-template-areas:
    "l-góra p-góra"
	  "l-dół p-dół";
}
.l-gora {
  grid-area: l-góra;
}
.p-gora {
  grid-area: p-góra;
}
.l-dol {
  grid-area: l-dół;
}
.p-dol {
  grid-area: p-dół;
}
.cover {
  grid-column: l-góra-start / p-góra-end;
  grid-row: l-góra-start / l-dół-end;
  background-color: lightgoldenrodyellow;
  opacity: 0.8;
}

Reguła dotycząca elementu .cover oznacza, że element ten zajmuje całą powierzchnię kontenera, więc efekt tych ustawień będzie wyglądał tak:

Celowo nadałem temu elementowi odrobinę przezroczystości, aby pokazać, że pod spodem znajdują się pozostałe elementy, które były dodane już wcześniej.

Jeśli chcesz, aby któryś z przykrytych elementów znajdował się na wierzchu, to możesz posłużyć się własnością z-index, która działa także w pozycjonowaniu CSS, np.:

.l-gora {
  background-color: green; 
  grid-area: l-góra;
  z-index: 1;
}

Domyślnie wszystkie elementy mają wartość z-index równą 0. Zmiana jej na 1 dla elementu l-gora spowodowała, że element ten „przeniósł się” nad element cover. Dodałem też kolor tła do elementu l-gora, aby wyraźnie pokazać, że teraz to on przesłania element cover. Spójrz na poniższy zrzut ekranu.

Niejawne nazwy obszarów

Tworzenie niejawnych nazw działa w obie strony, tzn. jeśli nadasz liniom nazwy zakończone przyrostkami –start i -end, to możesz odwoływać się do definiowanych przez nie obszarów, posługując się częścią główną tych nazw, pod warunkiem, że utworzą one prawidłowy obszar. Spójrz na poniższy bardzo prosty przykład:

.grid-container {
  display: grid;
  grid-template-columns: [content-start] 1fr [content-end];
}

Ta reguła tworzy tylko dwie linie, content-start i content-end, które obejmują obszar zajmujący całą dostępną w kontenerze przestrzeń. Do obszaru między tymi liniami można odwołać się na dwa sposoby. Pierwszy polega na użyciu własności przyjmujących nazwy linii, np. grid-column-start i grid-column-end:

.tresc {
  grid-column-start: content-start;
  grid-column-end: content-end;
}

Drugi sposób polega na użyciu niejawnie wygenerowanej nazwy content:

.tresc {
  grid-area: content;
}

W tym przypadku obie te reguły mają dokładnie takie samo znaczenie.

Siatki zagnieżdżone i podsiatki

Każda jednostka siatki może być jednocześnie kontenerem siatki. Wystarczy nadać jej ustawienie display: grid. W takim przypadku zawartość zagnieżdżonej siatki będzie niezależna od siatki nadrzędnej i będzie można pracować z jej jednostkami w normalny sposób. Powiedzmy, że mamy taką strukturę HTML:

<div class="grid-container">
  <p>Jakaś treść</p>
  <p>Jakaś treść</p>
  <p>Jakaś treść</p>
  <div class="grid-subcontainer">
    <p>Inna treść</p>
	<p>Inna treść</p>
	<p>Inna treść</p>
  </div>
</div>

Pierwszy element div, .grid-container, jest nadrzędnym kontenerem siatki, a drugi element div, .grid-subcontainer, jest kontenerem w nim zagnieżdżonym. Odpowiada za to poniższy arkusz stylów:

.grid-container {
  display: grid;
  grid-template-columns: 130px 190px 260px;
  grid-auto-rows: 140px;
}
.grid-subcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-subcontainer > p {
  border: 1px solid black;
}

Efekt zastosowania tych ustawień jest widoczny na poniższym zrzucie ekranu:

Siatka została zagnieżdżona w komórce siatki nadrzędnej, do której jest przyporządkowany reprezentujący ją element. Nie zawsze jednak o taki efekt chodzi. Czasami chcielibyśmy, aby siatka zagnieżdżona rozpościerała się na przestrzeni wszystkich kolumn siatki nadrzędnej. W takiej sytuacji przyda się nam własność grid-column ze słowem kluczowym span:

.grid-subcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column: span 3;
}

Nadaliśmy własności grid-column wartość 3, ponieważ chcemy, aby nasz kontener zagnieżdżony obejmował wszystkie trzy kolumny kontenera nadrzędnego. Teraz to wygląda tak:

Jednostki kontenera podrzędnego zajmują obszar trzech kolumn kontenera nadrzędnego, ale mają inne wymiary niż te kolumny, ponieważ dostępna przestrzeń została rozdzielona między nie po równo, a kolumny kontenera nadrzędne nie są równe. Widać to po liniach siatki nadrzędnej (fioletowe) i liniach jednostek siatki zagnieżdżonej (czarne).

Jeśli chcemy, aby jednostki kontenera podrzędnego miały taką samą szerokość, jak jednostki kontenera nadrzędnego, to możemy nadać im takie same ustawienia własności grid-template-columns, jakie zostały zastosowane w kontenerze nadrzędnym, albo możemy zamienić kontener zagnieżdżony w podsiatkę.

Podsiatka (ang. subgrid) to rodzaj podrzędnego kontenera siatki, który przejmuje ustawienia kolumn od swojego kontenera nadrzędnego. Aby go utworzyć, własności grid-template-columns należy nadać wartość subgrid:

.grid-subcontainer {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

Efekt:

Podsiatka „przejmuje” ustawienia tylu kolumn, ile obejmuje, w tym przypadku trzech. Gdybyśmy zmienili wartość span 3 na span 2, to podsiatka obejmowałaby dwie pierwsze kolumny siatki nadrzędnej, a więc utworzyłaby dodatkowy wiersz, aby zmieścić trzy elementy. Zachęcam do samodzielnego wypróbowania.

Odstępy między kolumnami i wierszami

Odstępy między wierszami i kolumnami (ang. gutter.) siatki można ustawiać za pomocą trzech własności: column-gap, row-gap oraz gap (własność zbiorcza obejmująca dwie poprzednie), które definiuje się dla kontenera siatki, np.:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 140px 140px;
  column-gap: 20px;
  row-gap: 20px;
}

W tym przykładzie utworzyliśmy siatkę czterech kolumn i dwóch wierszy, które są rozdzielone 20-pikselowym odstępem, jak widać na poniższym zrzucie ekranu:

Odstępy te należy traktować jako bardzo grube linie rozdzielające jednostki siatki. Nie ma możliwości umieszczenia na nich czegokolwiek za pomocą własności z modułu CSS Grid (oczywiście można to zrobić na przykład za pomocą technik pozycjonowania CSS).

Ponadto zwróć uwagę, że odstępy zostały dodane tylko między jednostkami siatki. Nie ma ich natomiast między pierwszą i ostatnią linią kontenera, a pierwszą i ostatnią ścieżką (kolumną i wierszem).

Odstępy między kolumnami i wierszami siatki nie wpływają na rozmiar kontenera, tylko zajmują część dostępnego w nim miejsca, a więc mają wpływ między innymi na wartości wartości obliczone z jednostką fr.

Równanie jednostek siatki w pionie i poziomie

Jednostki siatki CSS Grid można równać zarówno w pionie, jak i poziomie. Dostępne są własności pozwalające określać wyrównanie zarówno pojedynczych jednostek siatki, jak i wszystkich na raz. Te pierwsze stosuje się do konkretnych jednostek, a drugie — do kontenera siatki.

Równanie w poziomie

Do równania jednostek siatki w poziomie (względem osi śródliniowej) służą następujące własności:

• justify-items — definiowana dla kontenera, określa wyrównanie wszystkich jednostek siatki w kontenerze
• justify-self — definiowana dla indywidualnych jednostek, określa wyrównanie wybranych jednostek siatki

Równanie wszystkich jednostek w poziomie

Powiedzmy, że mamy taki kontener siatki:

<div class="grid-container">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

W poniższej regule CSS tworzymy siatkę czterech kolumn, w której zostaną umieszczone powyższe elementy akapitu HTML:

.grid-container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 140px;  
}
p {
  border: 12px solid yellow;
  margin: 0;
}

Przy tych ustawieniach jednostki siatki domyślnie będą zajmowały całą dostępną przestrzeń swoich komórek, co widać na poniższym zrzucie ekranu:

Zmiana wartości własności justify-items np. na center spowoduje, że jednostki przestaną wypełniać dostępną przestrzeń i w wymiarze osi śródliniowej przyjmą rozmiar swojej treści oraz odpowiednio ustawią się w swojej komórce, np.:

.grid-container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 140px;
  justify-items: center;
}

Efekt:

Pamiętaj, że własności justify-items i justify-self odnoszą się do całych jednostek siatki, nie tylko do ich zawartości.

Równanie indywidualnych jednostek w poziomie

Za pomocą własności justify-self można określić wyrównanie tylko wybranych jednostek siatki. Do poprzedniego przykładu dodaj poniższą regułę CSS:

p:first-child {
  justify-self: end;
}

W przypadku naszego przykładu reguła ta oznacza, że pierwszy element p będący dzieckiem kontenera siatki ma być wyrównany w poziomie (względem osi śródliniowej) do prawej (do końca tej osi). Efekt widać na poniższym zrzucie ekranu:

Równanie w pionie

Jednostki siatki można równać także w pionie (względem osi-blokowej). Sposób działania jest bardzo podobny, jak w przypadku równania względem osi poziomej, tylko używa się innych własności. Oto one:

• align-items — definiowana dla kontenera, określa wyrównanie wszystkich jednostek siatki w kontenerze
• align-self — definiowana dla indywidualnych jednostek, określa wyrównanie wybranych jednostek siatki

Aby zobaczyć efekt działania jednej z tych własności, dodaj poniższą deklarację do reguły kontenera siatki w poprzednim przykładzie:

.grid-container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 140px;
  justify-items: center;
  align-items: end;
}

Ten dodatek do reguły spowodował, że jednostki siatki przyjęły rozmiar swojej treści także w wymiarze pionowym, oraz przemieściły się do krawędzi dolnej swoich komórek.

W analogiczny sposób, jak poprzednio, za pomocą własności align-self można określić wyrównanie pionowe indywidualnych jednostek siatki.

Równanie zawartości kontenera

Opisane powyżej własności służą do wyrównywania zawartości obszarów lub komórek siatki, ale istnieje także grupa własności służących do wyrównywania położenia całej siatki w jej kontenerze. To oznacza oczywiście, że działają one wyłącznie wtedy, gdy siatka nie wypełnia całkowicie kontenera, np.:

.grid-container {
  border: 5px solid red;
  display: grid;
  width: 1200px;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: 140px;
  justify-content: center;
}

Efekt:

W tym przykładzie użyliśmy własności justify-content. Za jej pomocą wyrównaliśmy całą siatkę do środka w orientacji poziomej w kontenerze. Gdybyśmy zamiast niej zastosowali własność justify-items, to efekt byłby następujący:

W tym przypadku sama siatka nie jest wyśrodkowana w kontenerze, ale wyśrodkowana została zawartość jej komórek.

Oprócz własności justify-content istnieje jeszcze analogiczna własność align-content dla drugiego wymiaru oraz własność zbiorcza place-content, obejmująca obie te własności.