W marcu Mozilla wydała Firefoksa 52, który dodał wsparcie dla CSS Grid Layout. Jeśli nie jesteś zaznajomiony z CSS Grid, jest to dwuwymiarowy system układu dla stron internetowych, który pozwala nam tworzyć wzorce układu natywnie w przeglądarce. Oznacza to, że możemy łatwo odtworzyć znane siatki używając tylko kilku linii CSS. Oznacza to również, że możemy zrobić z CSS i układami wiele rzeczy, które nie były możliwe wcześniej… ale więcej o tym za chwilę.
Krótka uwaga: Ten post nie ma być wyczerpującym wstępem do CSS Grid, i zakłada podstawową znajomość CSS Grid. Jeśli jeszcze tego nie zrobiłeś, polecam sprawdzenie fantastycznej strony CSS Grid Layout na MDN.
Układy w sieci zawsze były podchwytliwe. Kiedy sieć została po raz pierwszy wprowadzona, nie było żadnej metody na układy. Potem pojawiły się tabele (w tabelach, w tabelach, w tabelach). Było to hackish i dziwne, ale działało. Kiedy CSS został wprowadzony w późnych latach 90-tych, programiści mogli zacząć używać divów i float do swoich projektów i układów. To ostatecznie doprowadziło do powstania frameworków i systemów siatek, które pomogły zrozumieć wszystkie „wpadki”, takie jak usuwanie pływaków, ujemne marginesy, projektowanie responsywne i wiele innych. I tak jest już od lat. Istnieją tysiące systemów siatki, ale wszystkie są mniej więcej takie same.
Teraz gdy CSS Grid Layout jest rzeczywistością, chciałem zobaczyć co trzeba by było zrobić by zastąpić istniejącą siatkę CSS Grid. Do tego eksperymentu, wybrałem popularny framework Bootstrap.
Zacząłem od stworzenia podstawowej strony używając siatki Bootstrap:
Zobacz na CodePen.
Więc rozłóżmy to i przekonwertujmy do użycia CSS Grid.
W Bootstrap, klasa .container zawija wszystko i ustawia ograniczenia szerokości. Dodaje również padding do lewej i prawej krawędzi oraz centruje wszystko. Nie ma tu zbyt wiele do zmieniania. Podobnie jak w przypadku Bootstrapa, klasa kontenera może być przydatna do użycia z CSS Grid. Odtworzyłem to tak:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Możemy również dodać responsywne punkty przerwania dodając następujące elementy:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap używa klasy .row do zawijania kolumn i zapewnienia ujemnego marginesu po lewej i prawej stronie, aby zanegować padding dodany przez poszczególne kolumny. Hacki takie jak ujemne marginesy nie są już potrzebne z CSS Grid, ale jeśli przeczytałeś dokumentację, będziesz wiedział, że CSS Grid wymaga kontenera siatki. Klasa .row jest idealnym miejscem aby to zrobić. Pozwól, że pokażę ci, co zrobiłem, a potem to rozłożymy.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid tworzy kontener siatki.
Właściwość grid-template-columns definiuje kolumny dla siatki. Możesz użyć spacji, aby zdefiniować każdą kolumnę indywidualnie, ale tutaj używamy notacji powtarzania, aby zdefiniować 12 równych rozmiarów kolumn. 1fr odnosi się do szerokości poszczególnych kolumn. MDN definiuje jednostkę fr jako nową jednostkę, która „reprezentuje ułamek dostępnej przestrzeni w kontenerze siatki”. Możesz przeczytać więcej o jednostkach fr na MDN. Możesz również przeczytać więcej o właściwości grid-template-columns.
Wreszcie, właściwość grid-gap jest właściwością shorthand, która określa zarówno ilość przestrzeni między kolumnami, jak i między wierszami kolumn. Pomyśl o tym jak o naszej rynnie. Możesz przeczytać więcej o grid-gap tutaj.
Teraz, wszystko co pozostało to klasy kolumn. Bootstrap używa klas kolumn, takich jak .col-md-6 lub .col-lg-8, aby określić liczbę kolumn, które ma zajmować div. Klasa ta również unosi div i dodaje wyściełanie po lewej i prawej stronie, aby utworzyć rynny pomiędzy kolumnami. Odtworzenie tych klas jest niezwykle proste dzięki właściwości skrótu .grid-column. Na przykład, jeśli chcielibyśmy odtworzyć klasę .col-md-6, możemy użyć następującego wyrażenia:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }} Proste, prawda? Żadnego float. Żadnego wyściełania. To po prostu działa. Skrót grid-column określa rozmiar i położenie elementu. Możemy użyć span, aby wskazać, że ten konkretny element powinien rozciągać się na sześć kolumn. Rynną zajmiemy się automatycznie dzięki właściwości grid-gap wrappera. Możesz dowiedzieć się więcej o właściwości grid-column tutaj.
Co więc się stanie, gdy poskładasz to wszystko razem? Cóż, strona wygląda dokładnie tak samo, ale jesteśmy w stanie całkowicie usunąć zależność od Bootstrapa i użyć natywnych siatek CSS.
Sprawdź zaktualizowaną stronę na CodePen.
Tego typu eksperymenty są zabawnym ćwiczeniem edukacyjnym, ale mogą być również niebezpieczne. Pożyczając linijkę od mądrego filozofa Jeffa Goldbluma:
„You … were so preoccupted with whether or not you could, you didn’t stop to think if you should.”
Nie chcemy ograniczać CSS Grid poprzez wpychanie go do składni, która ograniczy jego potencjał. Byliśmy w stanie łatwo odtworzyć siatkę Bootstrapa, ale CSS Grid jest o wiele bardziej potężny niż jakikolwiek system siatki, który pojawił się przed nim. To dlatego, że jest to rozwiązanie web-native zbudowane od podstaw.
Nie jesteśmy już zamknięci w 12-kolumnowych siatkach, które pływają od lewej do prawej. Chcesz umieszczać elementy w ściśle określonych miejscach na siatce, niezależnie od ich kolejności w źródle HTML? Proszę bardzo. Czy chcesz tworzyć elementy, które obejmują wiele kolumn i wierszy? Nie ma problemu. Zobacz to demo, które Craig Cook z Mozilli stworzył, aby zaprezentować różne wzorce układów. Spróbuj odtworzyć niektóre z tych układów za pomocą Bootstrapa (podpowiedź: nie jest to możliwe). Dopiero zarysowujemy powierzchnię tego, co potrafią siatki CSS.