TL;DR
Jeśli znasz już Flexbox, siatka powinna być już znajoma. Rachel Andrew prowadzi świetną witrynę poświęconą siatce CSS, aby ułatwić Ci rozpoczęcie pracy. Siatka jest teraz dostępna w Google Chrome.
Flexbox? Siatka?
W ciągu ostatnich kilku lat usługa CSS Flexbox stała się popularna i obsługa przeglądarek wygląda naprawdę dobrze (chyba że należysz do biednych ludzi, którzy muszą korzystać z IE9 i starszych wersji). Flexbox ułatwił wiele zadań związanych z układem, takich jak równe odstępy między elementami, układy od góry do dołu czy święty Graal CSS: wyśrodkowanie w pionie.
Niestety, ekrany zazwyczaj mają drugi wymiar, o który musimy się martwić. Bez konieczności samodzielnego określania rozmiaru elementów nie możesz mieć zarówno rytmu pionowego, jak i poziomego, używając samego Flexbox. Tutaj przydaje się CSS Grid.
CSS Grid jest projektowana. Od ponad 5 lat znajduje się pod flagą większość przeglądarek. Poświęcono dodatkowy czas na jej interoperacyjność, aby uniknąć wprowadzenia błędów takich jak Flexbox. Jeśli więc wdrożysz układ w Chrome za pomocą siatki, prawdopodobnie uzyskasz ten sam efekt w przeglądarkach Firefox i Safari. W momencie tworzenia tego tekstu implementacja siatki w Microsoft Edge jest nieaktualna (taka jak w IE11). Aktualizacja jest „rozważana”.
Pomimo podobieństw w koncepcji i składni nie traktuj Flexbox i Grid jako konkurujące techniki układu. Siatka jest rozmieszczona w dwóch wymiarach, a Flexbox w jednym. Stosowanie tych narzędzi razem daje synergię.
Definiowanie siatki
Jeśli chcesz zapoznać się z poszczególnymi właściwościami siatki, polecam artykuł Grid By Example autorstwa Rachela Andrew lub Cheat Sheet autorstwa Rachela. Jeśli znasz rozwiązanie Flexbox, wiele właściwości i ich znaczenie powinny być takie same.
Spójrzmy na standardowy 12-kolumnowy układ siatki. Popularny jest klasyczny układ 12-kolumnowy, ponieważ liczba 12 jest podzielna przez 2, 3, 4 i 6, dzięki czemu jest przydatna w wielu projektach. Zastosujmy taki układ:
Zacznijmy od naszego kodu znaczników:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
W arkuszu stylów zaczynamy od rozwijania obiektu body, tak aby obejmował cały widoczny obszar i przekształcił go w kontener siatki:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Teraz korzystamy z CSS Grid. Świetnie.
Następnym krokiem jest zaimplementowanie wierszy i kolumn siatki. Moglibyśmy wprowadzić wszystkie 12 kolumn w wersji testowej, ale ponieważ nie używamy wszystkich kolumn, byłoby to niepotrzebnie bałaganić w CSS. Dla ułatwienia zaimplementujemy układ w ten sposób:
Nagłówek i stopka mają zmienną szerokość, a treść – w obu wymiarach. Zawartość nawigacji jest zmienna w obu wymiarach, ale zamierzamy nałożyć na nią minimalną szerokość 200 pikseli. (Dlaczego? Oczywiście, aby pokazać cechy siatki CSS).
W siatce CSS zbiór kolumn i wierszy jest nazywany ścieżkami. Zacznijmy od zdefiniowania pierwszego zestawu ścieżek, czyli wierszy:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows stosuje sekwencję rozmiarów definiujących poszczególne wiersze.
W tym przypadku pierwszy wiersz ma wysokość 150 pikseli, a ostatniemu – 100 pikseli.
Środkowy wiersz jest ustawiony na auto, co oznacza, że dostosuje się do niezbędnej wysokości, aby zmieścić w nim elementy siatki (elementy podrzędne kontenera siatki). Ponieważ treść jest rozciągnięta na cały widoczny obszar, ścieżka zawierająca ją (żółta na ilustracji powyżej) co najmniej wypełni całą dostępną przestrzeń, ale w razie potrzeby będzie się powiększać (i umożliwi przewinięcie dokumentu).
W przypadku kolumn chcemy bardziej dynamiczne podejście: chcemy, aby zarówno zawartość nawigacji, jak i treść rosły (i zmniejszały się), ale szybkość nawigacji nigdy nie skurcza się poniżej 200 pikseli, a treść powinna być większa od obszaru nawigacji. W systemie Flexbox używaliśmy by giełdowego wzrostu i elastycznego zmniejszania, ale w siatce wygląda to trochę inaczej:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Definiujemy 2 kolumny. Pierwsza kolumna jest określana za pomocą funkcji minmax(), która przyjmuje 2 wartości: minimalny i maksymalny rozmiar ścieżki.
(jak min-width i max-width w jednym). Minimalna szerokość, jak wspominaliśmy, to 200 pikseli. Maksymalna szerokość to 3fr. fr to jednostka charakterystyczna dla siatki, która umożliwia rozłożenie dostępnego miejsca między elementami siatki. fr prawdopodobnie oznacza „jednostkę ułamkową”, ale może też wkrótce oznaczać wolną jednostkę.
Nasze wartości oznaczają, że obie kolumny powiększą się, aby wypełnić ekran, ale kolumna treści będzie zawsze 3 razy większa niż kolumna nawigacji (o ile kolumna nawigacji pozostaje szersza niż 200 pikseli).
Choć miejsce docelowe naszych elementów siatki jest jeszcze nieprawidłowe, rozmiar wierszy i kolumn działa prawidłowo i zapewnia takie zachowanie:
Umieszczanie elementów
Jedną z najbardziej przydatnych funkcji siatki jest możliwość umieszczania elementów bez względu na kolejność DOM. (chociaż czytniki ekranu poruszają się po DOM, zdecydowanie zalecamy, by zapewnić odpowiednią dostępność, trzeba też zwracać uwagę na kolejność elementów). Jeśli ręcznie nie dodasz elementów, elementy pojawią się w siatce w kolejności DOM, ułożone od lewej do prawej i z góry do dołu. Każdy element zajmuje 1 komórkę. Możesz zmienić kolejność wypełniania siatki, korzystając z pola grid-auto-flow.
Jak więc rozmieszczać elementy? Prawdopodobnie najprostszym sposobem umieszczania elementów siatki jest określenie, które kolumny i wiersze mają zawierać. Siatka udostępnia 2 składnie, które pozwalają to zrobić: W pierwszej składni definiujesz punkt początkowy i końcowy. W drugim wyznaczasz punkt początkowy i rozpiętość:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Chcemy, aby nagłówek zaczynał się w pierwszej kolumnie i kończył przed trzecią kolumną. Nawigacja powinna zaczynać się w drugim wierszu i obejmować łącznie 2 wiersze.
Technicznie rzecz biorąc, nasz układ jest już gotowy, ale chcę przedstawić kilka wygodnych funkcji dostępnych w siatce, które ułatwiają umieszczanie reklam. Pierwsza z nich to nazwanie obramowań ścieżek i użycie tych nazw dla 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 zwróci ten sam układ co wcześniej.
Jeszcze skuteczniejsza 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;
}
grid-template-areas pobiera ciąg nazw rozdzielonych spacjami, dzięki czemu deweloper może nadać każdej komórce nazwę. Jeśli dwie sąsiednie komórki mają taką samą nazwę,
zostaną one połączone w ten sam obszar. W ten sposób możesz nadać kodowi układu więcej semantyki i sprawić, że zapytania o multimedia staną się bardziej intuicyjne. Tak jak poprzednio, ten kod wygeneruje taki sam układ.
Czy chcesz coś więcej?
Tak, jest za dużo, żeby zmieścić się w jednym poście na blogu. Rachel Andrew, który jest też GDE, jest zaproszonym ekspertem w grupie roboczej ds. usług porównywania cen i od samego początku współpracuje z nią nad tym, aby siatka uprościła projektowanie stron internetowych. Napisała na niej nawet książkę. Jej witryna Grid by Example jest cennym źródłem informacji o siatce. Wielu ludzi uważa, że siatka to rewolucyjny sposób projektowania stron internetowych, który jest teraz domyślnie włączony w Chrome i można z niego korzystać już dziś.