CSS Grid Level 2: Nadchodzi Subgrid

Jesteśmy już ponad rok od wylądowania CSS Grid Layout w większości naszych przeglądarek, a CSS Working Group pracuje już nad poziomem 2 specyfikacji. W tym artykule wyjaśnię, co jest obecnie częścią Working and Editor's Draft tej specyfikacji. Pamiętaj, że wszystko tutaj może ulec zmianie i żadna z nich nie działa obecnie w przeglądarkach. Potraktuj to jako wgląd w proces, jestem pewien, że będę pisać bardziej praktyczne artykuły, gdy zaczniemy widzieć, jak implementacje nabierają kształtu.

Poziomy specyfikacji CSS

Funkcje CSS Grid, których obecnie możemy używać w przeglądarkach, to te z poziomu 1 specyfikacji CSS Grid. Różne części CSS są podzielone na moduły; ta modularyzacja nastąpiła, gdy CSS przeniósł się z CSS 2.1, dlatego czasami słyszysz, jak ludzie mówią o CSS3. W rzeczywistości nie ma CSS3. Zamiast tego był zestaw modułów, który zawierał wszystkie elementy, które były już częścią specyfikacji CSS2.1. Każdy CSS, który istniał w CSS2.1, stał się częścią modułu poziomu 3, dlatego mamy selektory CSS poziomu 3, tak jak selektory istniały w CSS2.1.

Nowe funkcje CSS, które nie były częścią CSS2.1, takie jak CSS Grid Layout, zaczynają się od poziomu 1. Specyfikacja CSS Grid Level 1 jest zasadniczo pierwszą wersją Grid. Gdy poziom specyfikacji osiągnie status Rekomendacji kandydata, główne nowe funkcje nie są dodawane. Oznacza to, że przeglądarki i inne programy użytkownika mogą zaimplementować specyfikację i może ona stać się zaleceniem W3C. Jeśli mają być zaprojektowane nowe funkcje, będą miały miejsce na nowym poziomie specyfikacji. Jesteśmy w tym momencie z układem CSS Grid Layout. Specyfikacja poziomu 1 znajduje się w CR, a specyfikacja poziomu 2 została stworzona w celu opracowania nowych funkcji. Sugerowałbym zajrzenie do wersji roboczej edytora, jeśli chcesz śledzić wraz z dyskusjami dotyczącymi specyfikacji, ponieważ będzie on zawierał wszystkie najnowsze zmiany.

Co będzie zawierał poziom 2 siatki CSS?

Docelowo specyfikacja poziomu 2 będzie zawierać wszystko to, co już jest na poziomie 1, plus kilka nowych funkcji. Jeśli spojrzysz na specyfikację w momencie pisania, jest notatka wyjaśniająca, że ​​cały poziom 1 powinien zostać skopiowany, gdy poziom 2 osiągnie CR.

Możemy wtedy spodziewać się znalezienia nowych funkcji, a Poziom 2 specyfikacji Grid dotyczy opracowania funkcji podsiatki CSS Grid. Ta funkcja została usunięta ze specyfikacji poziomu 1, aby dać czas na właściwe zrozumienie przypadków użycia dla podsiatki i dać więcej czasu na pracę nad nią bez wstrzymywania reszty poziomu 1. W pozostałej części tego artykułu będę przyjrzyj się funkcji podsiatki, która jest obecnie szczegółowo opisana w szkicu redaktora. Jesteśmy na bardzo wczesnym etapie tworzenia tej funkcji, jednak jest to idealny czas, aby kontynuować i faktycznie pomóc w kształtowaniu rozwoju specyfikacji. Moim celem podczas pisania tego artykułu jest wyjaśnienie niektórych omawianych kwestii, abyś mógł zrozumieć i wnieść swój wkład w dyskusje.

Co to jest podsiatka?

Korzystając z układu CSS Grid Layout, możesz już zagnieżdżać siatki. W poniższym przykładzie mam nadrzędną siatkę z sześcioma ścieżkami kolumn i trzema ścieżkami. Umieściłem element w tej siatce od wiersza kolumny 2 do wiersza 6 i od wiersza wiersza 1 do 3. Następnie uczyniłem ten element kontenerem siatki i zdefiniowałem ścieżki kolumn.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Ścieżki naszej zagnieżdżonej siatki nie mają związku ze ścieżkami na rodzicu. Oznacza to, że jeśli chcemy mieć możliwość wyrównania torów naszej zagnieżdżonej siatki z liniami na siatce zewnętrznej, musimy wykonać pracę i użyć metod obliczania rozmiarów torów, które zapewnią, że wszystkie tory pozostaną takie same. W powyższym przykładzie tory będą wyglądały na ustawione w szeregu, dopóki element o większym rozmiarze nie zostanie dodany do jednej komórki siatki (co zajmie więcej miejsca).

W przypadku kolumn często można obejść powyższy scenariusz, zasadniczo ograniczając elastyczność siatki. Możesz ustawić kolumny jednostek fr na minmax(0,1fr) , aby ignorowały rozmiar elementu podczas dystrybucji przestrzeni, lub możesz wrócić do używania wartości procentowych. Usuwa to jednak niektóre korzyści wynikające z używania siatki, a jeśli chodzi o wyrównywanie wierszy w siatce zagnieżdżonej, te metody nie będą działać.

Załóżmy, że chcemy mieć układ kart, w którym poszczególne karty mają nagłówek, treść i stopkę. Chcemy również, aby nagłówek i stopka były wyrównane na kartach.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Działa to tak długo, jak treść ma tę samą wysokość w każdym nagłówku i stopce. Jeśli mamy dodatkową zawartość, iluzja zostaje zerwana, a nagłówki i stopki nie są już wyrównane w rzędzie.

Tworzenie podsiatki

Możemy teraz przyjrzeć się, jak obecnie określona jest funkcja podsiatki i jak może rozwiązać problemy, które pokazałem powyżej.

Uwaga : w chwili pisania tego tekstu żaden z poniższych kodów nie działa w przeglądarkach. Celem jest tutaj wyjaśnienie składni i pojęć. Ostateczna specyfikacja również prawdopodobnie zmieni się od tych szczegółów. W celach informacyjnych napisałem ten artykuł na podstawie wersji roboczej wydawcy dostępnej 23 czerwca 2018 r.

Aby utworzyć podsiatkę, będziemy mieć nową wartość dla grid-template-rows i grid-template-columns . Te właściwości są zwykle używane z listą ścieżek, która określa liczbę i rozmiar ścieżek wierszy i kolumn. Jednak podczas tworzenia podsiatki nie chcesz określać tych ścieżek. Zamiast tego użyj wartości subgrid , aby poinformować siatkę, że ta zagnieżdżona siatka powinna używać liczby ścieżek i rozmiaru ścieżki, które obejmuje obszar siatki.

W poniższym kodzie mam nadrzędną siatkę z 6-kolumnowymi ścieżkami i 3-rzędowymi ścieżkami. Siatka zagnieżdżona jest elementem siatki w tej siatce nadrzędnej i rozciąga się od wiersza kolumny 2 do wiersza kolumny 6 i od wiersza wiersza 1 do wiersza wiersza 4. Jest to dokładnie jak nasz początkowy przykład, jednak możemy teraz przyjrzeć mu się za pomocą podsiatka. Siatka zagnieżdżona ma wartość subgrid zarówno dla grid-template-columns jak i grid-template-rows . Oznacza to, że siatka zagnieżdżona ma teraz 4-kolumnowe ścieżki i 2-wierszowe ścieżki, używając tego samego rozmiaru, co ścieżki zdefiniowane w ścieżce nadrzędnej.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Oznaczałoby to, że po każdej zmianie rozmiaru ścieżki na ścieżce nadrzędnej następowałaby zagnieżdżona siatka. Dłuższe słowo powodujące poszerzenie jednej ze ścieżek w siatce nadrzędnej spowoduje, że ścieżka w siatce zagnieżdżonej również stanie się szersza, więc wszystko będzie nadal się układać. Działałoby to również w drugą stronę: ścieżki siatki nadrzędnej mogłyby się poszerzyć w zależności od zawartości podsiatki.

Podsiatki jednowymiarowe

Możesz mieć podsiatkę w jednym wymiarze i określić rozmiar ścieżki w innym. W następnym przykładzie podsiatka jest określona tylko w grid-template-columns . Właściwość grid-template-rows ma określoną listę utworów. Ścieżki kolumn pozostaną zatem takie jak cztery ścieżki, które widzieliśmy powyżej, ale ścieżki wierszy można zdefiniować oddzielnie od ścieżek rodzica.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Oznacza to, że wiersze podsiatki zostaną zagnieżdżone w siatce nadrzędnej, tak jak w przypadku dzisiejszego tworzenia siatki zagnieżdżonej. Ponieważ nasza siatka zagnieżdżona obejmuje dwa wiersze rodzica, jeden lub oba wiersze będą musiały zostać rozszerzone, aby zawierały zawartość podsiatki, aby nie powodować przepełnień.

Możesz również mieć podsiatkę w jednym wymiarze, a drugi wymiar używać niejawnych ścieżek. W poniższym przykładzie nie określiłem żadnych ścieżek wierszy i podałem wartość dla grid-auto-rows . Wiersze zostaną utworzone w niejawnej siatce o określonym przeze mnie rozmiarze i, podobnie jak w poprzednim przykładzie, rodzic będzie musiał mieć miejsce na te wiersze lub rozszerzyć je, aby je pomieścić.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Numeracja linii i podsiatka

Jeśli ponownie przyjrzymy się naszemu pierwszemu przykładowi, rozmiar ścieżki naszej podsiatki jest dyktowany przez rodzica w obu wymiarach. Numery wierszy zachowują się jednak normalnie w podsiatce. Pierwsza linia kolumny w kierunku śródliniowym to linia 1, a linia na dalszym końcu kierunku śródliniowego to linia -1. Nie odwołujesz się do linii podsiatki z numerem linii rodzica.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Szczeliny i podsiatki

Podsiatka odziedziczy wszelkie odstępy między kolumnami lub wierszami ustawione w siatce nadrzędnej, jednak mogą one zostać zastąpione odstępami między kolumnami i wierszami określonymi w podsiatce. Jeśli, na przykład, siatka nadrzędna miała column-gap kolumnami ustawioną na 20 pikseli, ale podsiatka miała wtedy column-gap ustawioną na 0, komórki siatki podsiatki zyskałyby 10 pikseli z każdej strony w celu zmniejszenia odstępu do 0, przy czym linia siatki biegnąca zasadniczo pośrodku szczeliny.

Możemy teraz zobaczyć, jak subgrid pomógłby nam rozwiązać drugi przypadek użycia od początku tego artykułu, czyli posiadanie kart z nagłówkami i stopkami, które układają się na kartach.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Nazwy linii i podsiatka

Wszelkie nazwy linii z siatki nadrzędnej zostaną przekazane do podsiatki. Dlatego, jeśli nazwalibyśmy linie w naszej macierzystej siatce, moglibyśmy umieścić element zgodnie z tymi nazwami linii.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Możesz również dodać nazwy linii do podsiatki, linie siatki mogą mieć wiele nazw linii, więc te nazwy zostaną dodane do linii. Aby określić nazwy linii, dodaj listę tych nazw po wartości subgrid grid-template-columns i grid-template-rows . Jeśli weźmiemy powyższy przykład i dodamy również nazwy do linii podsiatki, otrzymamy dwie nazwy linii dla dowolnej linii podsiatki.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Ukryte utwory i podsiatka

Gdy zdecydujesz, że wymiar Twojej siatki jest podsiecią, usuwa to możliwość posiadania jakichkolwiek dodatkowych ukrytych ścieżek w tym wymiarze. Jeśli dodasz więcej elementów, które mogą się zmieścić, dodatkowe elementy zostaną umieszczone na ostatniej dostępnej ścieżce podsiatki w taki sam sposób, jak elementy są traktowane w zbyt dużych siatkach. Obszar siatki utworzony w podsiatce, który obejmuje więcej ścieżek niż jest dostępnych, będzie miał swoją ostatnią linię ustawioną na ostatnią linię podsiatki.

Jak wyjaśniono powyżej, jeden wymiar podsiatki może zachowywać się dokładnie tak samo, jak normalna siatka zagnieżdżona, w tym niejawne ścieżki.

Zaangażowanie się w proces

Praca grupy roboczej CSS odbywa się publicznie, na GitHub, tak jak każdy inny projekt open source. To sprawia, że ​​łatwiej jest śledzić wraz z pracą, że to wszystko wydarzyło się na liście mailingowej. Możesz przyjrzeć się problemom zgłoszonym w odniesieniu do poziomu 2 specyfikacji CSS Grid, wyszukując problemy oznaczone jako css-grid-2 w repozytorium CSS Working Group GitHub. Jeśli możesz podzielić się przemyśleniami lub przykładem użycia w którymkolwiek z tych problemów, byłoby to mile widziane.

Istnieją inne funkcje, o które ludzie prosili w CSS Grid Layout, a fakt, że nie zostały one uwzględnione na poziomie 2, nie oznacza, że ​​nie są brane pod uwagę. Możesz zobaczyć poziomy w miarę możliwości wydania funkcji w produkcie, tylko dlatego, że jakaś funkcja nie jest częścią bieżącego sprintu, nie oznacza, że ​​nigdy się nie wydarzy. Praca nad nowymi funkcjami platformy internetowej trwa zwykle nieco dłużej niż przeciętne wydanie produktu, ale jest to podobny proces.

Jak długo to wszystko trwa?

Tworzenie specyfikacji i implementacja w przeglądarce to nieco cykliczny, iteracyjny proces. Nie jest tak, że specyfikacja musi zostać „dokończona”, zanim zobaczymy niektóre implementacje przeglądarek. Początkowe implementacje prawdopodobnie będą kryć się za flagami funkcji — podobnie jak oryginalna specyfikacja sieci. Miej oko na ich pojawienie się, ponieważ gdy pojawi się kod do zabawy, znacznie ułatwi to myślenie o tych funkcjach!

Mam nadzieję, że ta wycieczka po tym, co może wkrótce nadejść, była interesująca. Jestem podekscytowany, że funkcja subgrid jest w toku, ponieważ zawsze uważałem, że jest to niezbędne dla systemu pełnego układu siatki w sieci, obserwuj tę przestrzeń, aby uzyskać więcej informacji na temat postępów tej funkcji i pojawiających się implementacji przeglądarek.