Pierwsze kroki z układem CSS

W ciągu ostatnich kilku lat CSS Layout uległ radykalnej zmianie, podobnie jak sposób, w jaki rozwijamy frontendy naszych witryn. Mamy teraz realny wybór, jeśli chodzi o metody układu, których używamy w CSS do tworzenia naszych witryn, co oznacza, że ​​często musimy dokonać wyboru, które podejście przyjąć. W tym artykule omówię różne dostępne metody układu, wyjaśniając podstawy ich użycia i celu.

Ten przewodnik jest dla Ciebie, jeśli jesteś całkiem nowy w CSS i zastanawiasz się, jaki jest najlepszy sposób podejścia do układu, ale także jeśli jesteś doświadczonym programistą z innego miejsca w stosie, który chce się upewnić, że Twoje dzisiejsze zrozumienie układu jest aktualne . Nie próbowałem tutaj w pełni udokumentować każdej metody układu, ponieważ stworzyłoby to książkę, a nie artykuł. Zamiast tego przedstawiam przegląd tego, co jest dla Ciebie dostępne, wraz z wieloma linkami, aby dowiedzieć się więcej.

Normalny przepływ

Jeśli wybierzesz stronę HTML, która nie ma zastosowanego CSS, aby zmienić układ, elementy będą wyświetlane w normalnym układzie . W normalnym trybie ramki są wyświetlane jedna po drugiej w zależności od trybu pisania dokumentu. Oznacza to, że jeśli masz tryb pisania poziomego, w którym zdania biegną od lewej do prawej lub od prawej do lewej, normalny przepływ wyświetli pola elementów blokowych jeden po drugim pionowo w dół strony.

Jeśli jesteś w trybie pisania pionowego, zdania biegną pionowo, więc normalny przepływ ułożyłby bloki poziomo.

Normalny układ zaczyna się od dowolnego układu: kiedy tworzysz układ CSS, bierzesz bloki i sprawiasz, że robią coś innego niż normalny układ.

Zorganizuj swój dokument, aby skorzystać z normalnego przepływu

Możesz skorzystać z normalnego przepływu, upewniając się, że dokument zaczyna się w dobrze zorganizowany sposób. Wyobraź sobie, że — zamiast tej koncepcji normalnego przepływu — przeglądarka układała wszystkie twoje pola w rogu jeden na drugim, dopóki nie utworzysz układu. Oznaczałoby to, że musiałbyś umieścić każdą rzecz na stronie. Zamiast tego przeglądarka wyświetla nasze treści w natychmiast czytelny sposób.

Jeśli Twój CSS nie załaduje się, użytkownik nadal będzie mógł czytać treść, a użytkownicy, którzy w ogóle nie otrzymują CSS (np. ktoś korzystający z czytnika ekranu), otrzymają treść w takiej kolejności, w jakiej znajduje się w dokumencie. To sprawia, że ​​z punktu widzenia dostępności ważne jest, aby Twój dokument HTML rozpoczął życie w dobrym porządku; jednak ułatwi to również życie programistom internetowym. Jeśli Twoje treści są w takiej kolejności, w jakiej spodziewałby się ją przeczytać użytkownik, nie musisz wprowadzać ogromnych zmian w układzie, aby umieścić je we właściwym miejscu. Dzięki nowszym metodom rozmieszczania możesz być zaskoczony, jak mało musisz zrobić.

Dlatego zanim zastanowisz się nad układem, zastanów się nad strukturą dokumentu i kolejnością, w jakiej chcesz, aby treść była odczytywana od góry dokumentu do dołu.

Odejście od normalnego przepływu

Gdy mamy już dobrze ustrukturyzowany dokument, musimy zdecydować, jak to zrobić i przekształcić go w pożądany układ. Będzie to oznaczać odejście od normalnego przepływu części naszego dokumentu. Mamy do wykorzystania cały zestaw metod układu. Pierwszą metodą, której się przyjrzymy, jest float , ponieważ pływaki są doskonałą demonstracją tego, co to znaczy wyciągnąć element z normalnego przepływu.

Pływa

Pływaki służą do przesuwania pola w lewo lub w prawo, umożliwiając wyświetlanie treści owiniętej wokół niego.

Aby umieścić element, użyj właściwości float CSS i wartości left lub right. Domyślna wartość float to none.

 .item { float: left; }

Warto zauważyć, że kiedy unosisz element i otacza go tekst, następuje skrócenie ramek liniowych tej treści. Jeśli pływający element i następujące pole zawierające tekst ma zastosowany kolor tła, można zobaczyć, że ten kolor tła będzie następnie wyświetlany pod pływającym elementem.

Ponieważ skracasz pola linii, aby zrobić miejsce między pływającym a zawijanym tekstem, musisz ustawić margines na pływającym elemencie. Margines na tekście po prostu przesunąłby tekst od krawędzi kontenera. W przypadku obrazu pływającego w lewo dodaj margines po prawej i u dołu, zakładając, że chcesz, aby obraz był wyrównany z górną i lewą częścią kontenera.

Czyszczenie pływaków

Po umieszczeniu elementu pływającego wszystkie następujące elementy będą zawijać się wokół tego elementu pływającego, dopóki nie zawiną się pod nim i będzie kontynuowany normalny przepływ. Jeśli chcesz temu zapobiec, musisz wyczyścić pływak.

W elemencie, który ma być wyświetlany po elemencie zmiennoprzecinkowym, dodaj właściwość clear z wartością left, aby wskazać czyszczenie elementu pływającego w lewo, w prawo, aby wyczyścić element pływający w prawo, lub obie, aby wyczyścić wszelkie elementy pływające.

 .clear { clear: both; }

Powyższa metoda działa, jeśli chcesz, aby element zaczynał się po liczbie zmiennoprzecinkowej. Nie pomoże, jeśli znajdziesz się w sytuacji, w której masz pływający element w polu, a obok niego jakiś tekst. Jeśli tekst jest krótszy niż element pływający, ramka zostanie narysowana pod treścią i zignoruje element swobodny. Jak już się dowiedzieliśmy, pływaki skracają pola linii, reszta układu jest kontynuowana w normalnym toku.

Aby temu zapobiec, musimy wyczyścić coś z pudełka. Moglibyśmy dodać pusty element i ustawić go, aby wyczyścić wszystko. Wiąże się to z wklejaniem pustych elementów div do naszego dokumentu, co nie jest idealne i może nie być możliwe, jeśli Twoja strona jest generowana przez CMS. Zamiast tego, typową metodą czyszczenia elementów pływających jest tak zwana metoda jasnej naprawy. Ta metoda działa poprzez dodanie treści generowanej przez CSS i ustawienie jej, aby wyczyścić obie.

Kontekst formatowania bloku

Innym sposobem na wyczyszczenie pływaków wewnątrz pudełka jest wywołanie kontekstu formatowania bloku (BFC) w kontenerze. Kontekst formatowania bloku zawiera wszystko, co się w nim znajduje, w tym elementy pływające, które nie mogą już wystawać spodu pudełka. Istnieje kilka sposobów na wymuszenie BFC, najczęstszym przy usuwaniu elementów zmiennoprzecinkowych jest ustawienie właściwości overflow na wartość inną niż domyślna widoczna.

 .container { overflow: auto; }

Używanie przepełnienia w ten sposób ogólnie działa, jednak w niektórych sytuacjach możesz skończyć z przyciętymi cieniami lub niechcianymi paskami przewijania na elemencie. Może to również wyglądać trochę dezorientująco w twoim arkuszu stylów: czy ustawiłeś przepełnienie, ponieważ chciałeś użyć pasków przewijania, czy tylko po to, aby uzyskać tę umiejętność czyszczenia?

Aby uczynić zamiar jaśniejszym i zapobiec tworzeniu BFC powodujących niepożądane efekty uboczne, możesz użyć flow-root jako wartości właściwości display . Jedyną rzeczą, która się display: flow-root jest utworzenie BFC, a tym samym wyczyszczenie pływaków bez powodowania innych problemów.

 .container { display: flow-root; }

Starsze wykorzystanie pływaków

Zanim pojawiły się nowsze metody układania, do tworzenia układów kolumn używano pływaków, technika ta działała, nadając zestawowi elementów szerokość i ustawiając je tak, aby unosiły się obok siebie. Staranne zarządzanie procentowym rozmiarem tych pływających pudełek może stworzyć efekt siatki.

Nie sugerowałbym rozpoczynania nowego projektu teraz i korzystania z tej metody. Pozostanie jednak w istniejących witrynach jeszcze przez wiele lat. Dlatego jeśli natkniesz się na projekt, w którym prawie wszystko wydaje się unosić, to jest to zastosowana technika.

Zasoby i dalsze czytanie na temat pływaków i czyszczenia pływaków

• „Clearfix: zmuś element do samooczyszczenia swoich dzieci”, Chris Coyier, CSS-Tricks
• „ float ”, CSS: kaskadowe arkusze stylów, dokumentacja internetowa MDN
• „ clear ”, CSS: kaskadowe arkusze stylów, dokumentacja internetowa MDN
• „Zrozumienie układu CSS i kontekstu formatowania bloków”, Rachel Andrew, Smashing Magazine

Pozycjonowanie

Aby usunąć element z normalnego przepływu lub przesunąć go z jego miejsca w normalnym przepływie, możesz użyć właściwości position w CSS. W normalnym przepływie elementy mają position static . Pozycje są wyświetlane jeden po drugim w wymiarze Blok, a jeśli przewijasz stronę, przewijają się wraz z nią.

Zmieniając wartość pozycji, zazwyczaj będziesz również używać wartości przesunięcia, aby przesunąć pole z określonego punktu odniesienia. Użyty punkt odniesienia zależy od wartości używanej pozycji.

Pozycjonowanie względne

Jeśli element ma position: relative , wówczas punktem odniesienia jest miejsce, w którym normalnie znajdowałby się w normalnym przepływie. Następnie możesz użyć wartości przesunięcia dla właściwości top , left , bottom i right , aby przenieść pole z miejsca, w którym normalnie byłoby wyświetlane.

 .item { position: relative; bottom: 50px; }

Pamiętaj, że inne elementy na stronie nie reagują na nową pozycję Twojego elementu. Miejsce, w którym został umieszczony w normalnym przepływie, jest zarezerwowane, dlatego musisz samodzielnie zarządzać wszelkimi nakładami się.

Pozycjonowanie bezwzględne

Ustaw position: absolute na elemencie i zostanie ona całkowicie usunięta z normalnego przepływu. Pozostała przestrzeń zostanie usunięta. Element zostanie następnie umieszczony w stosunku do zawierającego go bloku, który, o ile nie jest zagnieżdżony w innym pozycjonowanym elemencie, będzie rzutnią.

Dlatego pierwszą rzeczą, która się wydarzy, jeśli ustawisz position: absolute na elemencie, jest to, że zazwyczaj kończy się on przyklejeniem na górze i na lewo od widocznego obszaru. Następnie możesz użyć wartości przesunięcia dla właściwości top , left , bottom i right , aby przenieść pole z tej pozycji do żądanego miejsca.

 .item { position: absolute; top: 20px; right: 20px; }

Często nie chcesz, aby pudełko było ustawione zgodnie z rzutnią, ale w odniesieniu do elementu zawierającego, jest ono wewnątrz. W takim przypadku musisz nadać temu zawierającemu elementowi wartość pozycji inną niż domyślna statyczna.

Jako position: relative nie usuwa elementu z normalnego przepływu, jest to zwykle wybór. Podaj element nadrzędny, dla którego chcesz ustawić swoje przesunięcia od position: relative , a następnie odsuń blok pozycjonowany bezwzględnie od granic tego elementu.

Naprawiono pozycjonowanie

Coś z opcją position: fixed będzie w większości przypadków pozycjonowane względem rzutni i usuwane z obiegu dokumentu, aby nie było dla niego miejsca. Gdy strona jest przewijana, stały element pozostaje na swoim miejscu względem widocznego obszaru, tak jak reszta treści w normalnym przepływie przewija się jak zwykle.

 .item { position: fixed; top: 20px; left: 100px; }

Może to być pomocne przy włączaniu stałego panelu nawigacyjnego, który pozostaje na ekranie, np. podczas przewijania treści. Podobnie jak w przypadku innych wartości pozycjonowania, może to spowodować nakładanie się, dlatego należy zadbać o to, aby cała treść mogła zostać odczytana i nie znalazła się za stałym elementem.

Aby ustawić ustalony element inny niż względem rzutni, musisz mieć element zawierający z jedną z właściwości transform , perspective lub filter ustawioną na coś innego niż ich domyślna wartość none . W tym przypadku ten element stanie się blokiem zawierającym, a twoje przesunięcia odnoszą się do tego bloku, a nie do rzutni.

Lepkie pozycjonowanie

Ustawienie position: sticky do elementu spowoduje, że element będzie przewijał się z dokumentem, tak jak w normalnym przepływie, jednak gdy osiągnie określony punkt w stosunku do rzutni (przy użyciu zwykłych przesunięć), „przykleja się” i zaczyna zachowuj się jak position: fixed . Jest to nowsza wartość i jest gorzej obsługiwana w przeglądarkach niż inne metody, jednak sprowadza się do zwykłego przewijania za pomocą systemu operacyjnego strony, co jest wartością ładnie używaną jako ulepszenie bez powodowania problemów, jeśli nie jest obsługiwana.

 .item { position: sticky; top: 0; }

W ten sposób można stworzyć popularny efekt przewijania paska nawigacyjnego wraz z zawartością, a następnie zatrzymywania się na górze okienka ekranu, aby pozostać na ekranie podczas przewijania zawartości.

Zasoby i dalsze czytanie na temat pozycjonowania

• „Pozycjonowanie”, MDN Learning Area, dokumentacja internetowa MDN, Mozilla
• “ position: sticky; ”, Chris Coyier, CSS-Tricks
• „Pozycja CSS: przyklejona”, informacje obsługi przeglądarki dotyczące pozycjonowania przyklejonego, caniuse

Układ elastyczny

Flexible Box Layout (Flexbox) to metoda układu przeznaczona do układu jednowymiarowego. Jednowymiarowy oznacza, że ​​chcesz ułożyć treść w rzędzie lub w kolumnie. Aby zmienić swój element w układ flex, użyj właściwości display z wartością flex .

 .container { display: flex; }

Bezpośrednie dzieci tego elementu stają się elementami elastycznymi, będą ułożone jako wiersz, wyrównany do krawędzi początkowej w kierunku śródliniowym.

Osie Flexbox

W powyższym przykładzie opisałem elementy jako ułożone wyrównane do krawędzi początkowej naszego wiersza w kierunku wbudowanym, zamiast opisywać je jako wyrównane do lewej. Nasze elementy są ułożone w rzędzie, ponieważ domyślną wartością właściwości flex-direction jest row , co tworzy wiersz w kierunku śródliniowym, w którym przebiegają zdania. Ponieważ pracujemy w języku angielskim, w języku pisanym od lewej do prawej, początek rzędu znajduje się po lewej stronie, więc nasze przedmioty zaczynają się tam. Wartość flex-direction definiuje zatem główną oś Flexbox.

Oś poprzeczna przebiega zatem w poprzek osi głównej pod kątem prostym. Jeśli Twoim kierunkiem elastycznym jest row , a Twoje elementy są wyświetlane w kierunku wbudowanym, oś poprzeczna biegnie w kierunku Bloku. Jeśli Twoim flex-direction jest column , więc elementy biegną w kierunku Bloku, wtedy oś poprzeczna przebiega wzdłuż rzędu.

Jeśli przyzwyczaisz się do myślenia w kategoriach osi głównej i poprzecznej podczas pracy z Flexboxem, ułatwi to wiele rzeczy.

Kierunek i porządek

Flexbox daje Ci możliwość zmiany kierunku elementów na głównej osi za pomocą wartości flex-direction row-reverse lub column-reverse .

Możesz również zmienić kolejność poszczególnych elementów flex za pomocą właściwości order . Należy jednak zachować szczególną ostrożność, ponieważ może to spowodować problem dla każdego użytkownika, który nawiguje za pomocą klawiatury, a nie myszy lub ekranu dotykowego, ponieważ kolejność tabulacji w dokumencie będzie zgodna z kolejnością zawartości w źródle. Aby uzyskać więcej informacji, zobacz sekcję poniżej dotyczącą kolejności wizualnej i kolejności dokumentów.

Właściwości Flex

Właściwości flex pozwalają kontrolować proporcje elementów flex wzdłuż głównej osi. Te trzy właściwości to:

• flex-grow
• flex-shrink
• flex-basis

Są one zwykle używane w skróconej formie właściwości flex , przy czym pierwsza wartość to flex-grow , druga flex-shrink i trzecia flex-basis .

 .item { flex: 1 1 200px; }

Wartość flex-basis określa rozmiar, jaki będzie miał przedmiot, zanim nastąpi jakikolwiek wzrost lub kurczenie się. W powyższym przykładzie rozmiar ten wynosi 200 pikseli, więc każdemu przedmiotowi przydzieliliśmy 200 pikseli przestrzeni. Jest mało prawdopodobne, że nasz kontener zostanie porządnie podzielony przez 200 pikseli, więc pozostanie miejsce lub za mało miejsca na wszystkie elementy, jeśli każdy z nich ma 200 pikseli. Właściwości flex-grow i flex-shrink pozwalają nam kontrolować, co dzieje się z przedmiotami, jeśli jest dla nich za dużo lub za mało miejsca.

Jeśli flex-grow jest ustawiony na jakąkolwiek dodatnią wartość, wtedy element może urosnąć, aby zająć miejsce. Dlatego w naszym przykładzie powyżej, po nadaniu każdemu przedmiotowi 200 pikseli, dodatkowa przestrzeń zostanie podzielona między przedmioty.

Jeśli flex-shrink jest ustawione na wartość dodatnią, to element może się skurczyć w sytuacji, w której wystąpiłoby przepełnienie, gdyby wszystkie elementy otrzymały swoją flex-basis . Gdyby w naszym przykładzie nie było wystarczająco dużo miejsca w kontenerze, każdy element zmniejszyłby się o równą wielkość, aby zmniejszyć, aż wszystkie elementy zmieszczą się w kontenerze.

Wartości flex-grow i flex-shrink mogą być dowolną wartością dodatnią. Element o większej wartości flex-grow będzie miał proporcjonalnie więcej dostępnej przestrzeni podczas wzrostu, a z większą wartością flex-shrink więcej zostanie usunięte podczas kurczenia.

Zrozumienie sposobu, w jaki działają te elastyczne właściwości, jest naprawdę kluczem do zrozumienia Flexbox, a zasoby wymienione poniżej dostarczą Ci wszystkich szczegółów. Rozważ jednak użycie Flexbox, gdy masz kilka rzeczy, które chcesz rozciągnąć i zgnieść w pojemniku w jednym wymiarze. Jeśli próbujesz ułożyć rzeczy w wierszach i kolumnach, potrzebujesz siatki, aw takim przypadku Flexbox prawdopodobnie nie jest narzędziem do tego zadania.

Zasoby i dalsze czytanie dotyczące układu elastycznego

• „CSS Flexible Box Layout”, kompletny przewodnik po specyfikacji, dokumentacja internetowa MDN, Mozilla
• „Kompletny przewodnik po Flexbox”, Chris Coyier, CSS-Tricks
• „Flexbox Froggy”, gra do nauki Flexbox
• „Flexbugs”, wyselekcjonowana przez społeczność lista błędów przeglądarki związanych z Flexbox

Układ siatki

CSS Grid Layout został zaprojektowany jako dwuwymiarowa metoda układu. Dwuwymiarowość oznacza, że ​​chcesz rozmieścić swoje treści w rzędach i kolumnach. Podobnie jak w przypadku Flexbox, Grid Layout jest wartością display , więc aby zacząć używać Grid, powinieneś zacząć od display: grid w swoim kontenerze, a następnie skonfigurować kilka kolumn i/lub wierszy za pomocą grid-template-columns i grid-template-rows właściwości grid-template-rows .

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

Powyższy CSS utworzy siatkę o stałym rozmiarze z całkowicie ustalonymi ścieżkami kolumn i wierszy. To prawdopodobnie nie jest to, czego chcesz w Internecie, a Grid dobrze Cię obejmuje. Domyślną wartością dla każdego utworu jest auto , co ogólnie można uznać za „wystarczająco duże dla treści”. Gdybyśmy nie utworzyli żadnych ścieżek wierszy, zostałyby utworzone wiersze, abyśmy mogli wziąć dowolną dodaną zawartość, a te miałyby auto rozmiar. Typowym wzorcem jest określenie ścieżek kolumn, ale umożliwienie Grid tworzenie wierszy zgodnie z wymaganiami.

Chociaż możesz skonfigurować ścieżki kolumn i wierszy, używając dowolnej jednostki długości lub wartości procentowej, możesz również użyć nowej jednostki fr , jednostki utworzonej dla układu siatki. Jednostka fr jest jednostką elastyczną i oznacza udział w dostępnej przestrzeni w kontenerze siatki.

Siatka może rozdzielić przestrzeń dla Ciebie; nie musisz obliczać procentów, aby upewnić się, że rzeczy zmieszczą się w pojemniku. W poniższym przykładzie tworzymy kolumny przy użyciu jednostki fr i umożliwiamy automatyczne tworzenie ścieżek. Używamy również grid-gap , aby rozmieścić nasze ścieżki (zobacz sekcję Wyrównanie pola, aby uzyskać więcej informacji na temat przerw i układu siatki).

Podobnie jak w przypadku Flexbox i flex-grow lub flex-shrink , jednostka fr zajmuje się dzieleniem dostępnej przestrzeni. Wyższa wartość fr dla jednego utworu oznacza proporcjonalnie więcej dostępnego miejsca. Możesz także mieszać jednostki fr i długości bezwzględne. Przestrzeń potrzebna na długości zostanie odjęta od dostępnej przestrzeni przed obliczeniem jednostek fr .

Terminologia sieci

Siatka zawsze ma dwie osie: oś Inline biegnie w kierunku, w którym są ułożone słowa na stronie, a oś bloku w kierunku, w którym są ułożone bloki.

Kontener siatki to element, który ustawiłeś display: grid włączona. Następnie masz linie siatki utworzone przez ścieżki kolumn i wierszy określone podczas korzystania z grid-template-columns i grid-template-rows . Najmniejsza jednostka na siatce (między czterema przecinającymi się liniami) jest znana jako komórka siatki, podczas gdy zbiór komórek siatki, które tworzą pełny prostokąt, nazywa się obszarem siatki.

Automatyczne umieszczanie siatki

Gdy tylko utworzysz siatkę, bezpośrednie elementy potomne twojego kontenera siatki zaczynają się układać, po jednym w każdej komórce siatki. Robią to zgodnie z zasadami automatycznego umieszczania siatki. Te reguły zapewniają, że każdy element zostanie umieszczony w pustej komórce, unikając nakładania się elementów.

Każde bezpośrednie dziecko kontenera siatki, któremu nie dałeś pozycji, zostanie umieszczone zgodnie z zasadami automatycznego umieszczania. W poniższym przykładzie spowodowałem, że co trzeci przedmiot obejmuje dwurzędowe ścieżki, a jednocześnie jest automatycznie umieszczany na linii startu.

Podstawowe pozycjonowanie na podstawie linii

Najprostszym sposobem pozycjonowania elementów w siatce jest pozycjonowanie oparte na linii, dające reguły elementom, które mówią, aby rozciągały się od jednej linii siatki do drugiej. Na przykład, jeśli mam siatkę z trzema ścieżkami kolumn i ścieżkami z dwoma rzędami, mogę umieścić element od linii kolumny 1 do linii kolumny 3 i od linii wiersza 1 do linii wiersza 3. Następnie obejmie w sumie cztery komórki siatki , obejmujący dwie ścieżki kolumn i dwa rzędy kolumn.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

Te właściwości mogą być reprezentowane jako skrót, grid-column i grid-row przy czym pierwszą wartością jest start i drugi koniec .

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

Elementy siatki mogą zajmować te same komórki, umożliwiając tworzenie projektów z nakładającą się zawartością. Elementy układają się w stos w zwykły sposób, w jaki zawartość jest układana w Internecie, a elementy obniżające źródło pojawiają się na górze innych elementów. Mimo to możesz użyć z-index aby to kontrolować.

Pozycjonowanie z nazwanymi obszarami

Możesz także rozmieszczać elementy w swojej siatce, używając Nazwanych obszarów. Aby użyć tej metody, należy nadać każdemu elementowi nazwę, a następnie opisać układ jako wartość właściwości grid-template-areas .

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

Podczas korzystania z tej metody należy pamiętać o kilku zasadach. Jeśli chcesz, aby element obejmował wiele komórek, powinieneś powtórzyć nazwę. Obszary muszą tworzyć pełny prostokąt, niedozwolone są elementy w kształcie litery L lub Tetris! Siatka musi być kompletna — każda komórka musi być wypełniona. Jeśli chcesz pozostawić spację, wypełnij tę komórkę znakiem . . Na przykład w poniższym CSS zostawiam prawy dolny róg pusty.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

To fajny sposób pracy, ponieważ każdy, kto patrzy na CSS, może dokładnie zobaczyć, jak będzie działał układ.

Zasoby i dalsze czytanie dotyczące układu siatki

CSS Grid Layout to znacznie więcej niż ten krótki przegląd, a poniższe zasoby pomogą Ci poznać specyfikację. Zarówno komponenty, jak i układ całej strony mogą być siatkami, wybierz Układ siatki, jeśli masz do utworzenia układ dwuwymiarowy — bez względu na to, jak duży lub mały.

• „CSS Grid Layout”, technologia internetowa dla programistów, dokumentacja internetowa MDN, Mozilla
• „Grid by Example” Wszystko, czego potrzebujesz, aby nauczyć się CSS Grid Layout, Rachel Andrew
• „Grid Garden”, zabawna interaktywna gra do testowania i doskonalenia umiejętności CSS
• „Układ terenu”, Jen Simmons, YouTube

Napisałem również kilka artykułów na Smashing Magazine, które mogą pomóc ci zagłębić się w różne koncepcje dotyczące sieci:

• „Najlepsze praktyki z układem siatki CSS”
• „Stylizowanie pustych komórek za pomocą wygenerowanej treści i układu siatki CSS”
• „Korzystanie z siatki CSS: obsługa przeglądarek bez siatki”
• „CSS Grid Gotchas i potknięcia”
• „Nazywanie rzeczy w układzie siatki CSS”

Porządek wizualny i dokumentowy

Na początku tego artykułu zasugerowałem, abyś zaczął od dokumentu w kolejności sensownej czytania od góry do dołu, ponieważ byłoby to pomocne zarówno pod względem dostępności, jak i sposobu działania układu CSS. Z naszego krótkiego wprowadzenia do Flexbox i CSS Grid widać, że byłoby możliwe dość radykalne odejście od tej kolejności. Może to spowodować problem.

Przeglądarki będą śledzić źródło dokumentu w przypadku jakiegokolwiek niewizualnego wykorzystania dokumentu. Dlatego czytnik ekranu odczyta kolejność dokumentu, a każdy, kto używa klawiatury do nawigacji, będzie przechodził przez dokument w kolejności, w jakiej jest w źródle, a nie w kolejności wyświetlania. Wielu użytkowników czytników ekranu nie jest całkowicie niewidomych, więc mogą używać czytnika ekranu, jednocześnie sprawdzając, gdzie się znajdują w dokumencie. W obu tych przypadkach wyświetlacz, który jest pomieszany w porównaniu ze źródłem, może rzeczywiście spowodować bardzo zagmatwaną sytuację.

Bądź bardzo świadomy, gdy przenosisz elementy z innej kolejności, w jakiej się znajdują w źródle. Jeśli zmienisz kolejność elementów w CSS, czy naprawdę powinieneś wrócić i zreorganizować swój dokument? Sprawdź, czy nadal możesz tabulatorem wokół dokumentu, a kolejność wizualna ma sens.

Zasoby i dalsze czytanie dla porządku wizualnego i dokumentów

• „CSS Grid Layout and Accessibility”, technologia internetowa dla programistów, dokumentacja internetowa MDN, Mozilla
• „Kolejność źródła HTML a kolejność wyświetlania CSS”, Adrian Roselli
• „Flexbox i nawigacja po klawiaturze rozłączają się”, Code Things, Tink
• „Konflikt responsywnych porządków o nacisk na klawiaturę”, Alastair Campbell

Generowanie pudełek

Wszystko, co umieścisz na stronie internetowej, tworzy ramkę, a wszystko w tym artykule opisuje, w jaki sposób możesz użyć CSS do rozmieszczenia tych ramek w swoim projekcie, jednak w pewnych okolicznościach możesz w ogóle nie chcieć tworzyć ramki. Istnieją dwie wartości właściwości display , które radzą sobie z sytuacjami, w których nie chcesz mieć pól.

Nie generuj pudełka ani zawartości ( display: none )

Jeśli chcesz, aby element i cała jego zawartość, w tym elementy podrzędne, nie były generowane, możesz użyć display: none . Element nie będzie teraz wyświetlany i żadne miejsce nie zostanie zarezerwowane na miejsce, w którym by się znajdował.

 .item { display: none; }

Nie generuj tego elementu, ale generuj elementy podrzędne ( display: contents )

Nowszą wartością display jest display: contents . Zastosuj display: contents elementu i pole dla tego elementu nie zostaną wygenerowane, ale wszystkie elementy potomne zostaną wygenerowane normalnie. Może to być pomocne, jeśli chcesz, aby pośrednie elementy podrzędne stały się częścią układu elastycznego lub siatki.

W poniższym przykładzie pierwszy element flex zawiera dwa zagnieżdżone elementy podrzędne, ale ustawiony na display: contents jego pudełko nie jest wypożyczane, a elementy podrzędne są wyświetlane tak, jakby były bezpośrednimi elementami podrzędnymi i stały się elementami flex. Usuń display: contents tego elementu, aby zobaczyć, jak zmienia się układ.

Zasoby i dalsze czytanie do generowania pudełek

• „Znikające pudełka z display: contents ”, Rachel Andrew
• Jak display: contents; Działa”, Ire Aderinokun,
• display: contents ”, Informacje o obsłudze przeglądarki, caniuse

Wyrównanie

Wyrównanie było do niedawna dość trudnym tematem w sieci, z bardzo ograniczonymi sposobami prawidłowego wyrównania elementów w pudełkach. Zmienia się to wraz z modułem Box Alignment, którego obecnie będziesz używać podczas kontrolowania wyrównania w kontenerach Grid i Flex. W przyszłości inne metody rozmieszczania również będą implementować te właściwości linii trasowania. Lista właściwości wyrównania wyszczególniona w specyfikacji wyrównania prostokąta jest następująca:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Ponieważ modele układu mają różne funkcje, wyrównanie działa nieco inaczej w zależności od używanego modelu układu. Przyjrzyjmy się, jak działa wyrównanie z niektórymi prostymi układami siatki i Flex.

Właściwości align-items i justify-items ustawiają właściwości align-self i justify-self jako grupę. Te właściwości wyrównują elementy w ich obszarze siatki.

Właściwości align-content i justify-content wyrównują ścieżki siatki tam, gdzie w kontenerze siatki jest więcej miejsca niż jest to potrzebne do wyświetlenia ścieżek.

W Flexbox, align-items i align-self zajmują się wyrównaniem na osi poprzecznej, podczas gdy justify-content zajmuje się dystrybucją przestrzeni na osi głównej.

Na osi poprzecznej można użyć align-content miejscu, w którym zawinięto linie flex i dodatkowe miejsce w kontenerze flex.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

Zasoby i dalsze czytanie dotyczące fragmentacji

• „Przewodnik po stanie arkuszy stylów druku w 2018 roku”, Rachel Andrew, Smashing Magazine
• „Przerwy w kolumnach”, QuirksMode.org

Wybór typów układów: jak wybrać?

Większość stron internetowych używa kombinacji tych typów układów, a każda specyfikacja dokładnie określa, w jaki sposób współdziałają ze sobą. Na przykład możesz mieć układ siatki, w którym niektóre elementy siatki są również kontenerami Flex. Niektóre z tych elastycznych kontenerów mogą być blokami zawierającymi dla pozycjonowanego elementu lub zawierać obrazek w środku. Specyfikacje są napisane z oczekiwaniem, że będziemy mieszać modele układu, zgodnie z tym, co jest najlepsze dla treści, które układamy. W tym przewodniku starałem się opisać podstawowy sposób, w jaki zachowuje się każdy typ układu, aby pomóc ci w dopracowaniu tego, co prawdopodobnie jest najlepszym sposobem osiągnięcia określonego efektu.

Nie bój się jednak bawić różnymi sposobami tworzenia projektu, który masz na myśli. Jest mniej miejsc, niż możesz sobie wyobrazić, w których powinieneś się martwić o swoje wybory powodujące prawdziwy problem. Zacznij od dobrej struktury dokumentu i uważaj, aby nie odłączać wyświetlacza wizualnego od tej kolejności. Duża część reszty to tylko testowanie, czy wszystko działa zgodnie z oczekiwaniami w docelowych przeglądarkach.