TL;DR
Jeśli znasz Flexbox, Grid powinien wyglądać znajomo. Rachel Andrew prowadzi świetną stronę poświęconą CSS Grid, która pomoże Ci zacząć. Sieć jest teraz dostępna w Google Chrome.
Flexbox? Siatka?
W ciągu ostatnich kilku lat zyskało ono dużą popularność, 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łatwia wykonywanie wielu skomplikowanych zadań związanych z układem, takich jak stosowanie równomiernych odstępów między elementami, układy od góry do dołu czy święty Graal magii CSS: środkowanie w pionie.
Niestety ekrany zwykle mają drugi wymiar, którym musimy się zająć. 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.
Od ponad 5 lat pracujemy nad siatką CSS, która jest dostępna w większości przeglądarek za pomocą flagi, a dodatkowo poświęciliśmy dodatkowy czas na zapewnienie interoperacyjności, aby uniknąć problemów z uruchomieniem, które wystąpiły w przypadku Flexboxa. Jeśli więc zastosujesz Grid do implementacji układu w Chrome, prawdopodobnie uzyskasz ten sam wynik w Firefoksie i Safari. W momencie pisania tego tekstu implementacja siatki w przeglądarce Microsoft Edge jest nieaktualna (taka sama jak 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. Zastosowanie ich jednocześnie powoduje synergię.
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 z 12 kolumnami. Klasyczny układ z 12 kolumnami jest popularny, ponieważ liczba 12 jest podzielna przez 2, 3, 4 i 6, a więc 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 implementacja wierszy i kolumn naszej siatki. Moglibyśmy zaimplementować wszystkie 12 kolumn w naszym makiety, ale ponieważ nie używamy wszystkich kolumn, spowodowałoby to niepotrzebne zaśmiecenie kodu CSS. Dla uproszczenia wdrożymy układ w ten sposób:
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? Oczywiście, aby pokazać funkcje siatki CSS).
W CSS Grid zestaw kolumn i wierszy nazywa się ścieżkami. Zacznijmy od zdefiniowania pierwszego zestawu utworów, czyli wierszy:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows stosuje 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 niezbędnej wysokości, aby pomieścić elementy siatki (podrzędne kontenera siatki) w tym rzędzie. Ponieważ ciało rozciąga się na cały widoczny obszar, ścieżka zawierająca treść (żółta na ilustracji powyżej) wypełni co najmniej całą dostępną przestrzeń, ale w razie potrzeby będzie się powiększać (i przewijać dokument).
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 definiowana za pomocą funkcji minmax(), która przyjmuje 2 wartości: minimalny i maksymalny rozmiar ścieżki.
(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 siatkowa, która umożliwia rozłożenie dostępnego miejsca na jej elementy. fr oznacza prawdopodobnie „jednostkę ułamkową”, ale w najbliższym czasie może również oznaczać wolną jednostkę.
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 najbardziej przydatnych funkcji siatki jest możliwość umieszczania elementów bez względu na kolejność w DOM. (chociaż czytniki ekranu poruszają się po interfejsie DOM, zdecydowanie zalecamy, aby zapewnić użytkownikom odpowiedni dostęp, dlatego pamiętaj o kolejności 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ć dwóch 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.
Implementacja układu została zakończona, ale chcę przedstawić kilka wygodnych funkcji siatki, które ułatwiają rozmieszczanie reklam. Pierwszą z nich jest to, że możesz nazwać granice ścieżki i używać ich jako miejsc docelowych:
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 zapewni taki sam układ jak poprzednio.
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ć, aby zapytania o media były bardziej intuicyjne. Kod wygeneruje taki sam układ jak wcześniej.
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 siatka jest rewolucyjnym rozwiązaniem w projektowaniu stron internetowych – teraz jest ona domyślnie włączona w Chrome, więc możesz zacząć z niej korzystać już dziś.