Redakcyjne wzorce projektowe z siatką CSS i nazwanymi kolumnami

Wiele witryn, w szczególności tych, które wyświetlają długie treści, ma dość prosty, powtarzający się wzór komponentów: obszar o pełnej szerokości dla obrazów, centralny obszar treści i być może widok podzielony na dwa bloki o połowie szerokości. Te komponenty powtarzają się, aby wyświetlić artykuł, obrazy i inną powiązaną treść — a redaktorzy treści wybierają odpowiedni komponent podczas tworzenia artykułów do publikacji.

W tym artykule zademonstruję podejście do tego rodzaju projektowania redakcyjnego, które opiera się na kilku technikach, z których niektóre są omówione w następujących artykułach:

• „Wyrwanie się z układem siatki CSS”
• „Wyrwanie się z wyjaśnieniem siatki CSS”
• „Nazywanie rzeczy w układzie siatki CSS”

Oprócz tego, że jest to dobry sposób na nazywanie sekcji układu, ta technika ujawnia całą masę interesujących rzeczy dotyczących układu siatki, które mogą być przydatne przy tworzeniu własnych wzorców układu. Pokazuje również więcej obietnicy subgrid (część nadchodzącego poziomu 2 specyfikacji grid i zaimplementowana w Firefoksie).

Nazywanie rzeczy w układzie siatki CSS

Korzystając z układu siatki CSS, możesz nazywać linie i obszary. Obie te rzeczy mogą sprawić, że praca z Grid — zwłaszcza złożonymi siatkami — będzie prostsza. Definiowanie konwencji nazewnictwa dla elementów w układzie może być przydatne podczas pracy z zespołem; o wiele łatwiej jest zrozumieć, gdzie znajdzie się coś umieszczonego w grid-area: content niż w przypadku umieszczenia czegoś z column-line: 3 / 9 .

Korzystając z podejścia grid-template-areas , nadajesz nazwę elementom, które chcesz umieścić na siatce, używając właściwości grid-area , a następnie umieszczając je wokół siatki. W poniższym przykładzie element z grid-area: content trafia do obszaru siatki zdefiniowanego przez właściwość grid-template-areas area:

Działa to dobrze w przypadku komponentów, w których masz jeden przedmiot, który można umieścić w jednym obszarze; jeśli jednak chcesz umieścić wiele elementów w obszarze zawartości (jeden pod drugim), użycie grid-area jest niewłaściwym podejściem. Zamiast tego możesz zdefiniować nazwy wierszy kolumn i umieścić element od początku do końca.

Nie jest to jednak tak zgrabne, gdy używamy podejścia opartego na siatce, musimy znać zarówno linię początkową, jak i końcową, umieszczając element za pomocą grid-column grid-row — a może my?

Spójrz na następny przykład CodePen. Moje elementy są umieszczane przy użyciu jednej nazwy lub identyfikatora za pomocą właściwości grid-column , mimo że niektóre docelowe obszary siatki przecinają kilka kolumn:

Moim celem jest tutaj wyabstrahowanie złożoności konfiguracji siatki podczas faktycznego korzystania z siatki. Mogę włożyć dużo pracy w tworzenie początkowej siatki, ale potem umieszczam rzeczy bez zastanawiania się nad tym, gdy wypełniam moje strony. Chcę również upewnić się, że będziemy mogli powtarzać komponenty tak często, jak to konieczne, w miarę tworzenia artykułu. Mam na myśli twórcę treści używającego CMS i tworzącego bloki treści przy użyciu różnych wzorców, wiedząc, że zostaną one poprawnie umieszczone jeden pod drugim na całej siatce.

Aby zrozumieć, jak doszedłem do tego punktu, potrzebuję zrozumienia kilku rzeczy na temat CSS Grid Layout, a także nazwanych linii i obszarów.

Możemy nazwać linie

Jak już widzieliście w moim drugim przykładzie powyżej, możemy nazwać linie w siatce, które mogą być praktycznie dowolne — poza słowem span . Nazwa jest identyfikatorem , a nie ciągiem, dlatego nie jest cytowana.

Jednak zobaczysz wiele przykładów, w których używane są konwencje nazewnictwa name-start i name-end , które dołączają -start do nazwy linii początkowej i -end do nazwy linii końcowej. To nie jest czysta konwencja, a jeśli chodzi o technikę, pokażę ci, dlaczego musimy tak nazywać nasze linie. Powinieneś więc wybrać nazwę obszaru, który opisujesz, a następnie dodać przyrostki -start i -end — które oczywiście muszą się zgadzać!

Nasze linie nazywamy w nawiasach kwadratowych. Linie mogą (i często muszą) mieć wiele nazw. W takim przypadku spacja oddziela nazwy. Umieszczając elementy za pomocą pozycjonowania opartego na linii, możesz wybrać dowolną nazwę dla linii, aby umieścić ją.

Mając nasze nazwane wiersze na miejscu, moglibyśmy umieścić nasze elementy za pomocą grid-column określając nazwę linii początkowej i końcowej. Ten wzorzec jest taki sam, jak używanie numerów linii, więc nazwa przed ukośnikiem jest linią początkową, a nazwa po jest linią końcową.

To umieszcza przedmioty, ale nie jest to zgrabna pojedyncza nazwa dla przedmiotu, której użyłem w przykładzie. Jednak teraz mamy wszystko na swoim miejscu dzięki specjalnemu sposobowi, w jaki Grid obsługuje nazwane obszary i linie.

Nazwy linii dają nam nazwany obszar

Zakładając, że nazwałeś swoje linie za pomocą -start i -end , tak jak ja, Grid da ci nazwany obszar głównej nazwy, której użyłeś. Dlatego w moim przypadku mam obszary o nazwach content , start-half , end-half , full i center . Każdy z tych obszarów jest pojedynczym wierszem (ponieważ nie mam nazwanych wierszy), jednak będzie obejmował ścieżki kolumn od -start do -end linii.

Nazwane obszary dają nam nazwaną linię głównej używanej nazwy

Jeśli chcemy mieć możliwość umieszczania naszych elementów tak, jakbyśmy mieli nazwę kolumny, musimy również skorzystać z faktu, że tworząc obszar siatki, otrzymujemy nazwę linii używanej nazwy głównej; to znaczy, że główna nazwa jest nazwą z usuniętymi -start i -end . Ta nazwa wiersza jest rozpoznawana na początku lub na końcu obszaru, w zależności od tego, czy celem jest grid-column-start czy grid-column-end .

Mamy więc obszar o nazwie content , ponieważ mamy wiersze kolumn o nazwach content-start i content-end . Obszar o nazwie content daje nam również możliwość użycia grid-column-start: content , który zostanie rozwiązany do linii początkowej tego obszaru zawartości, podczas gdy grid-column-end: content zostanie rozwiązany do linii końcowej obszaru zawartości.

Oznacza to zatem, że możemy umieścić element w obszarze zawartości za pomocą:

 .content { grid-column: content / content; }

Następnie możemy teraz bardziej uporządkować tę technikę, ponieważ jeśli użyjesz nazwanej linii dla grid-column-start i pominiesz linię końcową (zamiast obejmować jedną ścieżkę, jak miałoby to miejsce w przypadku użycia numerów linii), siatka kopiuje nazwę do linii końcowej. Dlatego grid-column: content jest dokładnie taki sam jak grid-column: content / content;

To wszystko, czego potrzebujemy, aby móc umieszczać elementy za pomocą grid-column z prostą, pojedynczą nazwą. To zachowanie jest dokładnie takie, jak określono i nie jest to rodzaj „hacka”. Pokazuje głębię przemyśleń, jakie włożono w tworzenie specyfikacji układu siatki, oraz ilość starannej pracy włożonej w uproszczenie układania elementów w naszych projektach.

Nadanie tej technice supermocy za pomocą Subgrid

Myślę, że ta technika jest fajna, pozwala w bardzo prosty sposób deklarować, gdzie elementy powinny być umieszczone na siatce. Jeśli jednak dodamy do miksu obsługę subgridów, stanie się ona naprawdę bardzo potężna.

Obecnie subgrid jest wdrażany w Firefoksie, więc następne przykłady wymagają do działania Firefox Nightly. Możesz pobrać Nightly tutaj.

Wartość subgrid dla grid-template-columns i grid-template-rows oznacza, że ​​rozmiar utworzony na siatce nadrzędnej może zostać wybrany przez element, który jest potomkiem siatki (zakładając, że używa on również układu siatki) poprzez display: grid zastosowano display: grid .

Uwaga : Możesz przeczytać więcej o funkcjach subgrid w moich artykułach tutaj na Smashing Magazine „CSS Grid Level 2: Here Comes Subgrid” i „Dgging In to The Display Property: Grids All The Way Down”.

Nazwy linii od rodzica są przekazywane do podsiatek

Oprócz informacji o rozmiarze ścieżki przekazywanych do siatki podrzędnej, wszelkie nazwy linii ustawione w linii nadrzędnej zostaną przekazane. Oznacza to, że możemy używać naszych „nazw kolumn” w ramach komponentów podzielonych na podrzędne, dzięki czemu to rozwiązanie jest bardzo przydatne w świecie, w którym podsiatka istnieje. Element umieszczony w content — nawet jeśli jest zagnieżdżony w podsiatkach — zostanie wyrównany z elementem umieszczonym jako bezpośredni element potomny głównej siatki.

W następnym przykładzie zagnieździłem dwa elementy bezpośrednio w div z klasą full-2 . Umieściłem również ul w .content . Jeśli spojrzymy na elementy wewnątrz full-2 , aby umieścić je w siatce nadrzędnej, musimy ustawić selektor full-2 jako siatkę z display: grid a następnie użyć właściwości grid-template-columns z wartością subgrid .

Powoduje to, że siatka na .full-2 używa ścieżek zdefiniowanych w siatce nadrzędnej i ma dostęp do zdefiniowanych tam linii nazwanych. Ponieważ jest to element o pełnej szerokości, będzie on naprawdę zachowywał się jak siatka nadrzędna, jeśli chodzi o umieszczanie naszych elementów. Następnie możemy użyć dowolnych nazw, które zdefiniowaliśmy dla różnych kolumn, aby umieścić elementy. W tym przypadku ustawiłem oba elementy podrzędne na grid-column: center i wyświetlają się jeden po drugim w tym środkowym obszarze.

 .full-2 { grid-row: 4; grid-column: full; display: grid; row-gap: 10px; grid-template-columns: subgrid; } .full-2 > div { background-color: rgb(124,222,220); grid-column: center; } 

Jeśli spojrzymy na nasz zagnieżdżony ul w .content , będziemy musieli utworzyć podsiatkę na selektorze .content , tak jak w poprzednim przykładzie; kiedy to zrobimy, ul wpada do pierwszego toru podsiatki. Jeśli chcemy rozmieścić elementy odsłuchu w podsiatce, musimy zrobić dwie rzeczy: sprawić, by ul zajmował ten sam obszar co jego rodzic, umieszczając go w grid-column: content , a następnie tworząc siatkę, która jest podsiatka.

Po wykonaniu tej czynności elementy listy zostaną ułożone przy użyciu automatycznego umieszczania na ścieżkach kolumn podsiatki:

 .content { grid-row: 1; grid-column: content; display: grid; grid-template-columns: subgrid; } .content ul { grid-column: content; display: grid; row-gap: 10px; grid-template-columns: subgrid; } 

Gdy masz już swoją siatkę, możesz używać imion od rodzica w dokładnie taki sam sposób, jak poprzednio.

 .content li:nth-child(1) { grid-column: center; } .content li:nth-child(2) { grid-column: start-half; } .content li:nth-child(3) { grid-column: end-half; } .content li:nth-child(4) { grid-column: content; } 

Jeśli masz Firefox Nightly, możesz zobaczyć pełną wersję demonstracyjną w tym przykładzie CodePen:

W ten sposób możesz zachować „zagnieżdżanie” podsiatek w swojej strukturze znaczników i za każdym razem, gdy nazwy linii będą przez nie przekazywane. Myślę, że ta funkcja będzie szczególnie przydatna.

Podczas tworzenia podsiatki numery linii odpowiadają liniom podsiatki, a nie siatki macierzystej. Dlatego jeśli chcesz się upewnić, że elementy w podsiatce są wyrównane z siatką nadrzędną, użycie nazw linii lub nazwanych obszarów (jak pokazano w tym przykładzie) sprawi, że będzie to proste i logiczne.

Zawijanie

Wiesz już, jak wykorzystać tę technikę do głównej siatki i miejmy nadzieję, że nie potrwa to zbyt długo, zanim zaczniemy widzieć obsługę subgrid we wszystkich przeglądarkach. Umożliwi to techniki takie jak ta i sprawi, że będziemy mogli z niej korzystać niezwykle wydajnie.