TL;DR
Jeśli znasz flexbox, Grid nie powinien być Ci obcy. Rachel Andrew prowadzi świetną witrynę poświęconą CSS Grid, która pomoże Ci zacząć. Siatka jest teraz dostępna w Google Chrome.
Flexbox? Siatka?
W ciągu ostatnich kilku lat element flexbox w CSS stał się powszechnie stosowany, a obsługa w przeglądarkach wygląda naprawdę dobrze (chyba że należysz do nieszczęśników, którzy muszą obsługiwać IE9 i starsze wersje). Flexbox ułatwił wiele złożonych zadań związanych z układem, takich jak równomierne rozmieszczenie elementów, układy od góry do dołu czy święty Graal szaleńców CSS: wyśrodkowanie pionowe.
Niestety ekrany mają zwykle drugi wymiar, o który musimy się martwić. Oprócz samodzielnego określania rozmiarów elementów nie możesz jednocześnie stosować rytmu pionowego i poziomego, korzystając tylko z flexboxa. Właśnie w takich sytuacjach z pomocą przychodzi CSS Grid.
Rozwój siatki CSS trwał w większości przeglądarek przez ponad 5 lat, a dodatkowy czas poświęcono na interoperacyjność, aby uniknąć problemów z uruchomieniem, które wystąpiły w przypadku Flexboxa. Jeśli więc zastosujesz układ siatki w Chrome, prawdopodobnie uzyskasz ten sam wynik w Firefoksie i Safari. W momencie pisania tego artykułu implementacja Grida w Microsoft Edge jest nieaktualna (ta sama, która była już dostępna w IE11), a aktualizacja jest „rozważana”.
Pomimo podobieństw w koncepcji i składni nie traktuj Flexboxa i Grida jako konkurencyjnych technik układu. Siatka układa elementy w 2 wymiarach, a Flexbox – w 1 wymiarze. Połączenie tych dwóch narzędzi daje efekt synergii.
Definiowanie siatki
Aby zapoznać się z poszczególnymi właściwościami Grida, gorąco polecam Grid By Example Rachel Andrew lub Cheat Sheet CSS Tricks. Jeśli znasz flexbox, wiele właściwości i ich znaczenie powinno być Ci znane.
Przyjrzyjmy się standardowemu układowi siatki 12 kolumn. Klasyczny układ z 12 kolumnami jest popularny, ponieważ liczba 12 jest podzielna przez 2, 3, 4 i 6, a zatem przydaje się w wielu projektach. Zastosujmy ten układ:
Zacznijmy od kodu znacznika:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
W naszej arkusz stylów zaczynamy od rozszerzenia elementu body, aby obejmował cały obszar przeglądarki, i przekształcenia go w kontener siatki:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Obecnie używamy CSS Grid. Hurra!
Następnym krokiem jest zaimplementowanie wierszy i kolumn siatki. Moglibyśmy zaimplementować wszystkie 12 kolumn w naszym mockupie, ale ponieważ nie używamy wszystkich kolumn, spowodowałoby to niepotrzebne zamieszanie w pliku CSS. Dla uproszczenia wdrożenie tego układu będzie wyglądać tak:
Szerokość nagłówka i stopki jest zmienna, a zawartość ma zmienną szerokość i wysokość. Nawigacja będzie zmienna w obu wymiarach, ale narzucimy na nią minimalną szerokość 200 pikseli. (Dlaczego? Aby pokazać funkcje CSS Grid, oczywiście.
W CSS Grid zestaw kolumn i wierszy nazywa się ścieżkami. Zacznijmy od zdefiniowania pierwszego zestawu ścieżek, czyli wierszy:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
Funkcja grid-template-rows przyjmuje sekwencję rozmiarów, które definiują poszczególne wiersze.
W tym przypadku pierwszy wiersz ma wysokość 150 pikseli, a ostatni – 100 pikseli.
Środkowy rząd ma wartość auto, co oznacza, że dostosuje się do wymaganej wysokości, aby pomieścić elementy siatki (podrzędne kontenera siatki) w tym rzędzie. Ponieważ nasze ciało jest rozciągnięte na cały widok, ścieżka zawierająca zawartość (żółta na powyższym obrazku) wypełni przynajmniej całą dostępną przestrzeń, ale w razie potrzeby rozrośnie się (i spowoduje przewijanie dokumentu).
W przypadku kolumn chcemy zastosować bardziej dynamiczne podejście: chcemy, aby nawigacja i treści się powiększały (i zmniejszały), ale aby nawigacja nigdy nie była mniejsza niż 200 pikseli, a treści były większe niż nawigacja. W Flexbox użyjemy atrybutów flex-grow i flex-shrink, ale w przypadku siatki jest to nieco inne:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Definiujemy 2 kolumny. Pierwsza kolumna jest zdefiniowana za pomocą funkcji minmax(), która przyjmuje 2 wartości: minimalny i maksymalny rozmiar danego utworu.
(To połączenie funkcji min-width i max-width). Jak już wspomnieliśmy, minimalna szerokość to 200 pikseli. Maksymalna szerokość to 3fr. fr to jednostka związana z siatką, która umożliwia rozdysponowanie dostępnej przestrzeni na elementy siatki. fr oznacza prawdopodobnie „fraction unit” (ułamkowa jednostka), ale może też oznaczać „free unit soon” (niedługo bezpłatna jednostka).
Nasze wartości oznaczają, że obie kolumny będą się rozszerzać, aby wypełnić ekran, ale kolumna treści będzie zawsze 3 razy szersza niż kolumna nawigacji (pod warunkiem, że kolumna nawigacji będzie szersza niż 200 pikseli).
Umieszczenie elementów siatki nie jest jeszcze prawidłowe, ale rozmiar wierszy i kolumn jest prawidłowy i zachowuje się zgodnie z oczekiwaniami:
Umieszczanie elementów
Jedną z najpotężniejszych funkcji siatki jest możliwość umieszczania elementów bez względu na kolejność DOM. (Pamiętaj jednak, że czytniki ekranu nawigują po DOM, dlatego, aby zapewnić odpowiednią dostępność, musisz zwracać uwagę na to, jak zmieniasz kolejność elementów). Jeśli nie ustawisz ręcznego rozmieszczenia, elementy zostaną umieszczone w siatce w kolejności DOM, od lewej do prawej i od góry do dołu. Każdy element zajmuje 1 komórkę. Kolejność wypełniania siatki można zmienić za pomocą grid-auto-flow.
Jak więc umieszczać elementy? Najprostszym sposobem umieszczania elementów siatki jest określenie, które kolumny i wiersze mają one obejmować. Do tego celu możesz użyć 2 składni: W pierwszej definiujesz punkty początkowy i końcowy. W drugim określasz punkt początkowy i zakres:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Chcemy, aby nagłówek zaczynał się w pierwszej kolumnie, a kończył przed 3 kolumną. Nawigacja powinna zaczynać się w 2. wierszu i zajmować łącznie 2 wiersze.
Z technicznego punktu widzenia skończyliśmy już implementację układu, ale chcę pokazać Ci kilka funkcji, które Grid udostępnia, aby ułatwić Ci umieszczanie elementów. Pierwsza funkcja to możliwość nazywania krawędzi ścieżki i używania tych nazw do umieszczania:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Powyższy kod spowoduje zastosowanie tego samego układu co poprzedni kod.
Jeszcze bardziej przydatna jest funkcja nazywania całych regionów w siatce:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
Funkcja grid-template-areas przyjmuje ciąg nazw oddzielonych spacjami, co pozwala deweloperowi nadać nazwę każdej komórce. Jeśli 2 sąsiednie komórki mają tę samą nazwę, zostaną połączone w jedną komórkę. Dzięki temu możesz dodać więcej semantyki do kodu układu i sprawić, że zapytania o media będą bardziej intuicyjne. Ten kod wygeneruje ten sam układ co poprzednio.
Czy to wszystko?
Tak, jest ich zbyt wiele, aby można je było omówić w jednym poście na blogu. Rachel Andrew, która jest też GDE, jest zaproszonym ekspertem w grupie roboczej CSS i od samego początku współpracuje z tą grupą, aby upewnić się, że Grid upraszcza projektowanie stron internetowych. Napisała nawet książkę na ten temat. Jej strona Grid By Example (po angielsku) to cenna pomoc w zapoznaniu się z Grid. Wiele osób uważa, że Grid to rewolucyjny krok w projektowaniu stron internetowych. Jest on teraz domyślnie włączony w Chrome, więc możesz zacząć z niego korzystać już dziś.