Najlepsze praktyki z układem siatki CSS

Coraz bardziej powszechne pytanie — teraz, gdy ludzie używają CSS Grid Layout w produkcji — wydaje się brzmieć „Jakie są najlepsze praktyki?” Krótka odpowiedź na to pytanie polega na zastosowaniu metody układu określonej w specyfikacji. Poszczególne części specyfikacji, które zdecydujesz się użyć, a także sposób, w jaki łączysz Grid z innymi metodami układu, takimi jak Flexbox, sprowadza się do tego, co działa dla wzorców, które próbujesz zbudować i jak Ty i Twój zespół chcecie pracować.

Patrząc głębiej, myślę, że być może ta prośba o „najlepsze praktyki” może wskazywać na brak pewności w używaniu metody układu, która bardzo różni się od tej, która była wcześniej. Być może obawa, że ​​używamy Grid do rzeczy, do których nie została zaprojektowana, lub nie używamy Grid, kiedy powinniśmy. Może sprowadza się to do obaw o obsługę starszych przeglądarek lub o to, jak Grid pasuje do naszego przepływu pracy programistycznej.

W tym artykule postaram się omówić niektóre z rzeczy, które można opisać jako najlepsze praktyki, a także kilka rzeczy, którymi prawdopodobnie nie musisz się martwić.

Badanie

Aby pomóc w tym artykule, chciałem dowiedzieć się, w jaki sposób inni ludzie używają Grid Layout w produkcji, z jakimi wyzwaniami się zmierzyli, co naprawdę im się w tym podobało? Czy używano typowych pytań, problemów lub metod. Aby się tego dowiedzieć, przygotowałem krótką ankietę, w której zadałem pytania o to, w jaki sposób ludzie korzystali z układu siatki, a w szczególności o to, co najbardziej im się podobało i co stanowiło dla nich wyzwanie.

W następnym artykule będę się odwoływać i bezpośrednio cytować niektóre z tych odpowiedzi. Będę również zamieszczał linki do wielu innych zasobów, w których można dowiedzieć się więcej o opisanych technikach. Jak się okazało, w odpowiedziach na ankietę znalazł się znacznie więcej niż jeden artykuł interesujących rzeczy do rozpakowania. O kilku innych rzeczach, które pojawiły się w przyszłym poście.

Dostępność

Jeśli istnieje jakakolwiek część specyfikacji Grid, którą musisz zachować podczas używania, to jest to, gdy używasz wszystkiego, co może spowodować zmianę kolejności treści:

„Autorzy muszą używać właściwości kolejności i rozmieszczenia siatki tylko do wizualnej, a nie logicznej zmiany kolejności treści. Arkusze stylów, które wykorzystują te funkcje do logicznej zmiany kolejności, są niezgodne”.

— Specyfikacja siatki: zmiana kolejności i dostępność

Nie jest to charakterystyczne dla Grid, jednak możliwość łatwego przestawiania zawartości w dwóch wymiarach sprawia, że ​​jest to większy problem dla Grid. Jeśli jednak korzystasz z dowolnej metody, która pozwala na zmianę kolejności treści — czy to Grid, Flexbox, czy nawet bezwzględne pozycjonowanie — musisz uważać, aby nie odłączyć wizualnego wrażenia od struktury treści w dokumencie. Czytniki ekranu (i osoby poruszające się po dokumencie tylko za pomocą klawiatury) będą postępować zgodnie z kolejnością elementów w źródle.

Miejsca, w których musisz być szczególnie ostrożny, to użycie flex-direction do odwrócenia kolejności w Flexbox; właściwość order w Flexbox lub Grid; dowolne rozmieszczenie elementów Grid przy użyciu dowolnej metody, jeśli powoduje to przesunięcie elementów poza logiczną kolejność w dokumencie; i przy użyciu trybu gęstego upakowania grid-auto-flow .

Więcej informacji na temat tego problemu można znaleźć w następujących zasobach:

• Układ siatki i dostępność — MDN
• Flexbox i klawiatura nawigacyjna rozłączają się

Jakich metod układu siatki należy użyć?

„Mając tak duży wybór w Grid, wyzwaniem było trzymanie się spójnego sposobu jej pisania (np. nazywanie linii siatki lub nie, definiowanie obszarów szablonów siatki, rezerwy, zapytania o media), tak aby można je było utrzymać w całości zespół."

— Michelle Barker

Kiedy po raz pierwszy spojrzysz na siatkę, może wydawać się przytłaczająca z tak wieloma różnymi sposobami tworzenia układu. Ostatecznie jednak wszystko sprowadza się do tego, że rzeczy są umieszczane od jednej linii siatki do drugiej. Masz wybór na podstawie układu, który chcesz osiągnąć, a także tego, co działa dobrze dla Twojego zespołu i witryny, którą budujesz.

Nie ma dobrej ani złej drogi. Poniżej omówię niektóre z typowych tematów zamieszania. W poprzednim artykule „Grid Gotchas and Stumpbling Blocks” omówiłem już wiele innych potencjalnych obszarów nieporozumień.

Czy powinienem używać siatki niejawnej czy jawnej?

Siatka zdefiniowana za pomocą grid-template-columns i grid-template-rows jest znana jako siatka jawna. Explicit Grid umożliwia nazywanie linii w siatce, a także daje możliwość celowania w końcową linię siatki za pomocą -1 . Wybierzesz Explicit Grid, aby wykonać jedną z tych rzeczy i ogólnie, gdy masz cały zaprojektowany układ i wiesz dokładnie, gdzie powinny przebiegać linie siatki i rozmiar ścieżek.

Najczęściej używam niejawnej siatki do ścieżek rzędowych. Chcę zdefiniować kolumny, ale wtedy wiersze będą po prostu automatycznie dopasowywane i rosną, aby zawierać zawartość. Możesz kontrolować niejawną siatkę do pewnego stopnia za pomocą grid-auto-columns i grid-auto-rows , jednak masz mniejszą kontrolę niż w przypadku definiowania wszystkiego.

Musisz zdecydować, czy wiesz dokładnie, ile masz treści, a tym samym liczbę wierszy i kolumn — w takim przypadku możesz utworzyć siatkę jawną. Jeśli nie wiesz, ile masz zawartości, ale po prostu chcesz utworzyć wiersze lub kolumny, aby przechowywać to, co tam jest, użyjesz niejawnej siatki.

Niemniej jednak możliwe jest połączenie tych dwóch. W poniższym CSS zdefiniowałem trzy kolumny w Explicit Grid i trzy wiersze, więc pierwsze trzy wiersze treści będą następujące:

• Ścieżka o wysokości co najmniej 200 pikseli, ale rozwijana, by zawartość była wyższa,
• Tor o wysokości 400px,
• Ścieżka o wysokości co najmniej 300 pikseli (ale rozszerza się).

Każda dalsza zawartość zostanie umieszczona w wierszu utworzonym w niejawnej siatce, a ja używam właściwości grid-auto-rows , aby te ścieżki miały co najmniej 300 pikseli wysokości i rozwijały się do auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Elastyczna siatka z elastyczną liczbą kolumn

Używając notacji powtórzeń, autouzupełniania i minmax, możesz utworzyć wzór z tylu ścieżek, ile zmieści się w kontenerze, eliminując w ten sposób do pewnego stopnia potrzebę zapytań o media. Technikę tę można znaleźć w tym samouczku wideo, a także zademonstrować wraz z podobnymi pomysłami w moim ostatnim artykule „Korzystanie z zapytań o media do projektowania responsywnego w 2018 roku”.

Wybierz tę technikę, jeśli chcesz, aby zawartość spadła poniżej wcześniejszej zawartości, gdy jest mniej miejsca, i chętnie zapewnisz dużą elastyczność w dostosowywaniu rozmiaru. Poprosiłeś w szczególności o wyświetlanie kolumn w minimalnym rozmiarze i automatyczne wypełnianie .

W ankiecie pojawiło się kilka komentarzy, które sprawiły, że zacząłem się zastanawiać, czy ludzie wybierali tę metodę, gdy naprawdę chcieli siatki ze stałą liczbą kolumn. Jeśli masz nieprzewidywalną liczbę kolumn w pewnych punktach przerwania, lepiej ustawić liczbę kolumn – i w razie potrzeby przedefiniować za pomocą zapytań o media – zamiast korzystać z auto-fill lub auto-fit .

Jakiej metody doboru rozmiaru toru powinienem użyć?

Szczegółowo opisałem rozmiar toru w moim artykule „How Big Is That Box? Understanding Sizing In Grid Layout”, jednak często otrzymuję pytania o to, której metody określania rozmiaru toru użyć. W szczególności jestem pytany o różnicę między wielkością procentową a jednostką fr .

Jeśli po prostu użyjesz jednostki fr zgodnie ze specyfikacją, to różni się ona od używania wartości procentowej, ponieważ rozkłada dostępną przestrzeń. Jeśli umieścisz większy przedmiot na ścieżce, sposób, w jaki zadziała fr do, polega na tym, aby ścieżka zajęła więcej miejsca i rozprowadziła to, co pozostało.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Aby jednostka fr rozłożyła całą przestrzeń w kontenerze siatki, musisz nadać jej minimalny rozmiar 0 za pomocą minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Możesz więc użyć fr w jednym z tych scenariuszy: w tych, w których chcesz uzyskać dystrybucję przestrzeni na podstawie auto (zachowanie domyślne), oraz w tych, w których chcesz uzyskać równy rozkład. Zwykle używałbym jednostki fr , ponieważ wtedy ustala dla ciebie rozmiar i umożliwia użycie torów lub szczelin o stałej szerokości. Jedynym przypadkiem, w którym zamiast tego używam wartości procentowych, jest dodawanie składników siatki do istniejącego układu, który wykorzystuje również inne metody układu. Jeśli chcę, aby moje komponenty siatki były wyrównane z układem opartym na liczbach zmiennoprzecinkowych lub elastycznym, który wykorzystuje wartości procentowe, użycie ich w układzie siatki oznacza, że ​​wszystko używa tej samej metody ustalania rozmiaru.

Automatyczne umieszczanie przedmiotów lub ustawianie ich pozycji?

Często okaże się, że wystarczy umieścić jeden lub dwa elementy w swoim układzie, a reszta zostanie umieszczona na miejscu w zależności od kolejności treści. W rzeczywistości jest to naprawdę dobry test, że nie odłączyłeś źródła i wyświetlacza. Jeśli rzeczy prawie się układają w oparciu o automatyczne rozmieszczenie, to prawdopodobnie są w dobrym porządku.

Jednak kiedy już zdecydowałem, dokąd wszystko pójdzie, zwykle przypisuję pozycję do wszystkiego. Oznacza to, że nie kończę się dziwnymi rzeczami, jeśli ktoś doda coś do dokumentu, a siatka automatycznie umieści to w nieoczekiwanym miejscu, wyrzucając w ten sposób układ. Jeśli wszystko zostanie umieszczone, Grid umieści ten element w następnej dostępnej pustej komórce siatki. To może nie być dokładnie tam, gdzie chcesz, ale usiąść na końcu układu jest prawdopodobnie lepsze niż wskakiwanie na środek i pchanie innych rzeczy.

Którą metodę pozycjonowania zastosować?

Podczas pracy z układem siatki ostatecznie wszystko sprowadza się do umieszczania elementów z jednej linii do drugiej. Wszystko inne jest w tym zasadniczo pomocne.

Zdecyduj ze swoim zespołem, czy chcesz nazwać linie, użyć obszarów szablonów siatki, czy też zamierzasz użyć kombinacji różnych typów układu. Uważam, że lubię używać obszarów szablonów siatki w szczególności dla małych komponentów. Jednak nie ma dobra ani zła. Wypracuj, co jest dla Ciebie najlepsze.

Siatka w połączeniu z innymi mechanizmami układu

Pamiętaj, że układ siatki nie jest jedyną prawdziwą metodą układu, która rządzi nimi wszystkimi, jest przeznaczony dla określonego typu układu — a mianowicie układu dwuwymiarowego. Inne metody układania nadal istnieją i należy rozważyć każdy wzór i to, co najbardziej mu odpowiada.

Myślę, że jest to dość trudne dla tych z nas, którzy przywykli do hakowania z metodami układu, aby zrobić coś, do czego tak naprawdę nie zostały zaprojektowane. To naprawdę dobry moment, aby zrobić krok wstecz, przyjrzeć się metodom rozmieszczenia zadań, do których zostały zaprojektowane, i pamiętać, aby ich używać do tych zadań.

W szczególności bez względu na to, jak często piszę o Gridzie kontra Flexbox , będę pytany, z którego z nich korzystać. Istnieje wiele wzorów, w których każda metoda układu ma sens i to naprawdę zależy od Ciebie. Nikt nie będzie na ciebie krzyczał za wybranie Flexbox over Grid lub Grid over Flexbox.

W mojej własnej pracy zwykle używam Flexbox do komponentów, w których chcę, aby naturalny rozmiar elementów silnie kontrolował ich układ, zasadniczo przesuwając inne elementy. Często używam Flexbox, ponieważ chcę wyrównać, biorąc pod uwagę, że właściwości Box Alignment są dostępne tylko w Flexbox i Grid. Mogę mieć kontener Flex z jednym elementem podrzędnym, abym mógł wyrównać to dziecko.

Oznaką, że być może Flexbox nie jest metoda układu, którą powinienem wybrać, jest to, że zaczynam dodawać szerokości procentowe do elementów elastycznych i ustawiam flex-grow na 0. Powodem dodawania szerokości procentowych do elementów elastycznych jest często to, że próbuję wyrównać je w dwóch wymiarach (układanie rzeczy w dwóch wymiarach jest dokładnie tym, do czego służy Grid). Wypróbuj jednak oba i zobacz, który wydaje się najlepiej pasować do treści lub wzorca projektowego. Jest mało prawdopodobne, że spowodujesz w ten sposób jakiekolwiek problemy.

Zagnieżdżanie elementów siatkowych i elastycznych

To również często się pojawia i nie ma absolutnie żadnego problemu z uczynieniem elementu siatki również pojemnikiem siatki, w ten sposób zagnieżdżając jedną siatkę w drugiej. Możesz zrobić to samo z Flexbox, tworząc Flex Item i Flex Container. Możesz również utworzyć element siatki i kontener Flex lub element Flex jako kontener siatki — żadna z tych rzeczy nie stanowi problemu!

To, czego obecnie nie możemy zrobić, to zagnieździć jedną siatkę w drugiej i sprawić, by zagnieżdżona siatka używała ścieżek siatki zdefiniowanych w ogólnym rodzicu. Byłoby to bardzo przydatne i właśnie to mają rozwiązać propozycje podsieci na poziomie 2 specyfikacji sieci. Siatka zagnieżdżona staje się obecnie nową siatką, więc trzeba by zachować ostrożność przy ustalaniu rozmiaru, aby upewnić się, że jest wyrównana ze wszystkimi ścieżkami nadrzędnymi.

Możesz mieć wiele siatek na jednej stronie

Komentarz pojawił się kilka razy w ankiecie, co mnie zaskoczyło, wydaje się, że istnieje pomysł, aby siatka była ograniczona do głównego układu i że wiele siatek na jednej stronie może nie było dobrą rzeczą. Możesz mieć tyle siatek, ile chcesz! Użyj siatki do dużych i małych rzeczy, jeśli ma to sens ułożony jako siatka, użyj siatki.

Awarie i obsługa starszych przeglądarek

„Siatka używana w połączeniu z @supports umożliwiła nam lepszą kontrolę liczby odmian układu, których możemy się spodziewać. Działa to również bardzo dobrze dzięki naszemu stopniowemu podejściu do ulepszania, co oznacza, że ​​możemy nagradzać użytkowników nowoczesnych przeglądarek bez blokowania dostępu do treści osobom, które nie korzystają z najnowszych technologii”.

— Joe Lambert pracujący na portalu rareloop.com

W ankiecie wiele osób wspomniało o starszych przeglądarkach, jednak istniał dość równy podział między tymi, którzy uważali, że obsługa starszych przeglądarek jest trudna, a tymi, którzy uważali, że jest to łatwe z powodu zapytań o funkcje i faktu, że Grid zastępuje inne metody układu. O mechanice tworzenia tych awaryjnych pisałem obszernie w „Using CSS Grid: Supporting Browsers Without Grid”.

Ogólnie rzecz biorąc, nowoczesne przeglądarki są znacznie bardziej interoperacyjne niż ich wcześniejsze odpowiedniki. Zwykle widzimy znacznie mniej rzeczywistych „błędów przeglądarki”, a jeśli używasz poprawnie HTML i CSS, zazwyczaj zobaczysz, że to, co widzisz w jednej przeglądarce, jest takie samo, jak w innej.

Oczywiście zdarzają się sytuacje, w których jedna przeglądarka nie ma jeszcze obsługi określonej specyfikacji lub niektórych części specyfikacji. Dzięki Grid mieliśmy szczęście, że przeglądarki dostarczały Grid Layout w bardzo kompletny i interoperacyjny sposób w krótkim czasie od siebie. Dlatego nasze rozważania dotyczące testowania zwykle wymagają przetestowania przeglądarek z Grid i bez Grid. Być może zdecydowałeś się również na użycie wersji z -ms w IE10 i IE11, co wymagałoby przetestowania jako trzeci typ przeglądarki.

Przeglądarki obsługujące nowoczesny układ siatki (nie wersję IE) obsługują również zapytania funkcji. Oznacza to, że możesz przetestować obsługę sieci Grid przed jej użyciem.

Testowanie przeglądarek, które nie obsługują siatki

Korzystając z rezerw dla przeglądarek bez obsługi układu siatki (lub korzystając z wersji z -ms dla IE10 i 11), warto przetestować, jak te przeglądarki renderują układ siatki. Aby to zrobić, potrzebujesz sposobu na wyświetlenie swojej witryny w przykładowej przeglądarce.

Nie podjąłbym podejścia polegającego na łamaniu zapytania o funkcję przez sprawdzanie obsługi czegoś bezsensownego lub błędną pisownię w grid wartości . To podejście będzie działać tylko wtedy, gdy Twój arkusz stylów jest niewiarygodnie prosty i umieściłeś absolutnie wszystko, co ma związek z układem siatki w zapytaniach funkcji. Jest to bardzo delikatny i czasochłonny sposób pracy, zwłaszcza jeśli intensywnie korzystasz z Grid. Ponadto starsza przeglądarka nie tylko nie będzie obsługiwała układu siatki, ale także inne właściwości CSS będą nieobsługiwane. Jeśli szukasz „najlepszych praktyk”, ustawienie się tak, abyś był w dobrej pozycji do przetestowania swojej pracy, jest tam wysoko!

Istnieje kilka prostych sposobów na skonfigurowanie właściwej metody testowania swoich wad. Najłatwiejszą metodą — jeśli masz dość szybkie połączenie internetowe i nie masz nic przeciwko płaceniu abonamentu — jest skorzystanie z usługi takiej jak BrowserStack. Jest to usługa, która umożliwia przeglądanie stron internetowych (nawet tych, które powstają na Twoim komputerze) na wielu prawdziwych przeglądarkach. BrowserStack oferuje bezpłatne konta dla projektów open source.

Aby przetestować lokalnie, sugeruję użycie maszyny wirtualnej z zainstalowaną przeglądarką docelową. Firma Microsoft oferuje bezpłatne pobieranie maszyn wirtualnych z wersjami IE z powrotem do IE8, a także Edge. Możesz także zainstalować na maszynie wirtualnej starszą wersję przeglądarki bez obsługi sieci Grid. Na przykład pobierając kopię Firefoksa 51 lub niższej. Po zainstalowaniu starszego Firefoksa, pamiętaj o wyłączeniu automatycznych aktualizacji, jak wyjaśniono tutaj, ponieważ w przeciwnym razie po cichu się zaktualizuje!

Następnie możesz przetestować swoją witrynę w IE11 i nieobsługującym Firefoksie na jednej maszynie wirtualnej (o wiele mniej kruche rozwiązanie niż wartości z błędami pisowni). Konfiguracja może zająć około godziny, ale wtedy będziesz w naprawdę dobrym miejscu do przetestowania swoich wad.

Oduczanie się starych nawyków

„To był mój pierwszy raz, kiedy korzystałem z układu siatki, więc trzeba było się nauczyć wielu pojęć i zrozumieć właściwości. Koncepcyjnie najtrudniejszą rzeczą było oduczenie się wszystkich rzeczy, które robiłem przez lata, takich jak czyszczenie pływaków i pakowanie wszystkiego w pojemniki div”.

— Hidde pracuje nad hiddedevries.nl/en

Wiele osób odpowiadających na ankietę wspomniało o potrzebie oduczenia się starych nawyków oraz o tym, że nauka Layoutu byłaby łatwiejsza dla osób zupełnie nowych w CSS. Zgadzam się. Ucząc ludzi osobiście, zupełnie początkujący mają niewielki problem z używaniem Grid, podczas gdy doświadczeni programiści starają się przywrócić siatkę do jednowymiarowej metody układu. Widziałem próby „systemów siatkowych” używających CSS Grid, które dodają z powrotem w wierszu wrappery potrzebne do siatki opartej na pływakach lub siatce flex.

Nie bój się wypróbowywać nowych technik . Jeśli masz możliwość testowania w kilku przeglądarkach i pamiętasz o potencjalnych problemach z dostępnością, naprawdę nie możesz się pomylić. A jeśli znajdziesz świetny sposób na stworzenie określonego wzoru, poinformuj o tym wszystkich innych. Wszyscy jesteśmy nowicjuszami w używaniu Grid w produkcji, więc z pewnością jest wiele do odkrycia i udostępnienia.

„Grid Layout to najbardziej ekscytujący rozwój CSS od czasu zapytań o media. Został tak dobrze przemyślany pod kątem rzeczywistych potrzeb programistów i daje absolutną radość z użycia w produkcji - zarówno dla projektantów, jak i programistów.”

— Trys Mudford pracujący na trysmudford.com

Podsumowując, oto bardzo krótka lista najlepszych praktyk! Jeśli odkryłeś rzeczy, które działają lub nie działają dobrze w Twojej sytuacji, dodaj je do komentarzy.

1. Bądź bardzo świadomy możliwości zmiany kolejności treści. Sprawdź, czy wyświetlacz wizualny nie został odłączony od kolejności dokumentów.
2. Przetestuj przy użyciu rzeczywistych przeglądarek docelowych z lokalną lub zdalną maszyną wirtualną.
3. Nie zapominaj, że starsze metody układu są nadal aktualne i przydatne. Wypróbuj różne sposoby na osiągnięcie wzorców. Nie ograniczaj się do korzystania z Grid.
4. Wiedz, że jako doświadczony programista front-end prawdopodobnie masz cały zestaw uprzedzeń na temat działania układu. Spróbuj spojrzeć na te nowe metody na nowo, zamiast zmuszać je z powrotem do starych wzorców.
5. Próbuj różnych rzeczy. Wszyscy jesteśmy w tym nowi. Przetestuj swoją pracę i podziel się tym, co odkryjesz.