Samouczek dotyczący układu CSS: od klasycznych podejść do najnowszych technik

Opublikowany: 2022-03-11

Opanowanie układu strony bez opanowania CSS jest tak samo wykonalne, jak nauka pływania na suchym lądzie. Ale w przeciwieństwie do pływania – które po opanowaniu jest umiejętnością, która pozostaje z tobą na całe życie – opanowanie CSS to proces, który tak naprawdę nigdy się nie kończy, ponieważ sam CSS nieustannie ewoluuje.

Wyzwanie potęgują różnice w implementacji i obsłudze CSS w różnych przeglądarkach (a nawet w różnych wersjach tej samej przeglądarki), a także różne wskaźniki przyjęcia zaleceń CSS. Przez ponad dekadę projektanci stron internetowych i programiści zmagali się z sporadycznymi i niespójnymi seriami dodatkowych funkcji CSS3 obsługiwanych w każdej nowej wersji przeglądarki.

Ale tak czy inaczej, opanowanie CSS jest absolutną koniecznością dla każdego solidnego projektanta stron internetowych lub programisty. Ten artykuł przeprowadzi Cię przez kilka podstawowych zasad układu CSS, od klasycznych technik CSS2 po najnowsze podejścia do układu w CSS3.

UWAGA: Wszystkie przykłady kodu w tym artykule używają elementów HTML5 i składni Sass. Pełny działający kod można sklonować z https://github.com/laureanoarcanio/css-layout-examples.

Przypadek użycia

Jednym z najlepszych sposobów poznania technologii jest posiadanie konkretnego przypadku użycia, który próbujesz obsłużyć, lub konkretnego problemu, który próbujesz rozwiązać. W tym celu skupimy się na przypadku użycia z określonym zestawem wymagań.

Nasz przypadek użycia składa się z układu aplikacji internetowej z pewnym dynamicznym zachowaniem. Będzie miał stałe elementy na stronie, takie jak nagłówek, stopka, menu nawigacyjne i podnawigacja, a także przewijalną sekcję treści. Oto szczegółowe wymagania dotyczące układu:

Układ podstawowy
- Nagłówek, stopka, menu nawigacyjne i podnawigacja pozostają stałe podczas przewijania
- Elementy nawigacji i podnawigacji zajmują całą wolną przestrzeń w pionie
- Sekcja treści wykorzystuje całe wolne miejsce na stronie i ma przewijany obszar
Zachowanie dynamiczne
- Menu nawigacyjne domyślnie wyświetla tylko ikony, ale można je rozwinąć, aby wyświetlić tekst (a następnie zwinąć, aby ponownie wyświetlić tylko ikony)
Wariacje układu
- Niektóre strony mają podrzędną nawigację obok menu nawigacyjnego, a niektóre nie

Samouczek CSS przy użyciu klasycznych technik CSS2

Na początek oto znacznik HTML5, którego użyjemy w naszej przykładowej implementacji przy użyciu klasycznego CSS:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Naprawiono pozycjonowanie

W CSS2 możemy osiągnąć stałe elementy na stronie (nagłówek, stopka itp.) poprzez zastosowanie pozycjonowanego modelu układu, który wykorzystuje stałe pozycjonowanie.

Ponadto użyjemy właściwości CSS z-index , aby zapewnić, że nasze stałe elementy pozostaną „nad” inną zawartością strony. Właściwość z-index określa kolejność stosu elementu, gdzie element o większej kolejności stosu jest zawsze „na górze” elementu o niższym porządku stosu. Zauważ, że właściwość z-index działa tylko z elementami pozycjonowanymi . W naszym przykładzie arbitralnie użyjemy wartości z-index równej 20 (która jest wyższa niż domyślna), aby upewnić się, że nasze stałe elementy pozostaną wizualnie na pierwszym planie.

Ponadto ustawimy właściwość width na 100%, co poinstruuje przeglądarkę, aby wykorzystała całą dostępną przestrzeń w poziomie dla elementu.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

OK, to jest nagłówek i stopka. Ale co z #nav i #subnav ?

Rozszerzenie CSS

W przypadku #nav i #subnav użyjemy nieco bardziej wyrafinowanej techniki znanej jako rozszerzenie CSS , która może być używana podczas pozycjonowania elementów jako stałych (tj. w stałej pozycji na stronie) lub bezwzględnych (tj. w określonej pozycji względem najbliższego pozycjonowanego przodka lub bloku zawierającego).

Rozszerzenie w pionie jest osiągane przez ustawienie zarówno top , jak i bottom właściwości elementu na stałą wartość, dzięki czemu element rozszerzy się w pionie, aby odpowiednio wykorzystać pozostałą przestrzeń w pionie. Zasadniczo przywiązujesz górę elementu do określonej odległości od góry strony, a dół elementu do określonej odległości od dołu strony, aby element rozszerzał się, aby wypełnić całą pionową przestrzeń między tymi dwoma punktami.

Podobnie, rozwinięcie w poziomie osiąga się przez ustawienie zarówno left , jak i right właściwości elementu na stałą wartość, dzięki czemu element rozwinie się w poziomie, aby odpowiednio wykorzystać pozostałą poziomą przestrzeń.

W naszym przypadku użycia musimy użyć rozwinięcia pionowego.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Domyślne (statyczne) pozycjonowanie

Główny obszar zawartości przewijalnej może po prostu polegać na domyślnym (statycznym) pozycjonowaniu, dzięki czemu elementy są renderowane w takiej kolejności, w jakiej pojawiają się w przepływie dokumentu. Ponieważ wszystko inne na naszej stronie jest w stałej pozycji, ten element jest jedynym, który znajduje się w obiegu dokumentów. W rezultacie wszystko, co musimy zrobić, aby ustawić go poprawnie, to określić jego właściwość margin , aby uniknąć nakładania się na stały nagłówek, stopkę i nav/subnav:

 #main { margin: 6em 0 4em 20em; }

Dzięki temu spełniliśmy podstawowe wymagania dotyczące układu naszego przypadku użycia przy użyciu CSS2, ale nadal musimy spełnić dodatkowe wymagania dotyczące dynamicznej funkcjonalności.

Dynamiczne zachowanie przy użyciu klasycznych technik CSS2

Wymagania określały, że nasze menu nawigacyjne domyślnie pokazuje tylko ikony, ale można je również rozwinąć, aby wyświetlać tekst (a następnie można je zwinąć, aby ponownie wyświetlać tylko ikony).

Zacznijmy od dodania 5em do szerokości menu nawigacyjnego, gdy jest rozwinięte. Zrobimy to, tworząc „rozszerzoną” klasę CSS, którą możemy dynamicznie dodawać lub usuwać z elementu menu nawigacyjnego:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Oto przykład kodu JavaScript (w tym przykładzie używamy jQuery), którego można użyć do dynamicznego przełączania menu nawigacyjnego między trybem rozwiniętym i zwiniętym, na podstawie kliknięcia przez użytkownika ikony przełączania nawigacji:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Dzięki temu nasze menu nawigacyjne można teraz dynamicznie rozwijać lub zwijać. Świetnie.

Cóż, w pewnym sensie świetnie, ale nie do końca. Chociaż menu nawigacyjne może się teraz rozszerzać i kurczyć, nie współgra z resztą strony. Rozszerzone menu nawigacyjne nakłada się teraz na podnawigację, co zdecydowanie nie jest pożądanym zachowaniem.

To ujawnia jedno z kluczowych ograniczeń CSS2; mianowicie, jest zbyt wiele rzeczy , które muszą być zakodowane na stałe ze stałymi wartościami pozycji. W rezultacie dla innych elementów na stronie, które muszą zostać przesunięte w celu dostosowania do rozwiniętego menu nawigacyjnego, musimy zdefiniować dodatkowe „rozszerzone” klasy CSS z jeszcze bardziej stałymi wartościami pozycji.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Następnie musimy rozszerzyć nasz kod JavaScript, aby dodać dynamiczne dostosowywanie tych innych elementów, jak również po kliknięciu przełącznika nawigacji przez użytkownika:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

OK, to działa lepiej.

Wariacje układu przy użyciu klasycznych technik CSS2

Teraz zajmijmy się wymaganiem posiadania niektórych stron, które ukrywają menu podrzędne. W szczególności chcemy, aby podmenu nawigacji było ukryte, gdy użytkownik kliknie ikonę „użytkownicy” w głównym obszarze nawigacji.

Więc najpierw utworzymy nową klasę „ukrytą”, która stosuje display: none :

 .hidden { display: none; }

I znowu użyjemy JavaScript (jQuery), aby zastosować „ukrytą” klasę CSS do elementu #subnav , gdy użytkownik kliknie ikonę użytkowników:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Dzięki temu dodaniu element #subnav zostaje poprawnie ukryty, gdy użytkownik kliknie ikonę „users”, ale zajmowane przez niego miejsce pozostaje niewykorzystane , a nie inne elementy rozwijane w celu wykorzystania miejsca zwolnionego przez element #subnav .

Aby uzyskać pożądane zachowanie, gdy #subnav element #subnav, użyjemy jednego z mniej znanych, ale bardzo przydatnych selektorów CSS, znanych jako selektor sąsiedniego rodzeństwa .

Selektor CSS sąsiedniego rodzeństwa

Przylegający selektor rodzeństwa pozwala określić dwa elementy, wybierając tylko te wystąpienia drugiego elementu, które bezpośrednio następują po określonym pierwszym elemencie.

Na przykład, poniższe polecenie wybierze tylko te elementy z identyfikatorem main , które bezpośrednio następują po elemencie o identyfikatorze subnav :

 #subnav + #main { margin-left: 20em; }

Powyższy fragment kodu CSS ustawia lewy margines #main na 20em wtedy i tylko wtedy , gdy następuje bezpośrednio po wyświetlonym #subnav .

Jednakże, jeśli #nav jest rozwinięty (co powoduje, że expanded klasa jest również dodawana do #main , na podstawie naszego wcześniejszego kodu), przesuwamy lewy margines #main do 25em.

 #subnav + #main.expanded { margin-left: 25em; }

A jeśli #subnav jest ukryty, przesuwamy lewy margines #main do końca do 6em, aby znaleźć się tuż obok #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Uwaga: jedną z wad korzystania z selektora sąsiedniego rodzeństwa jest to, że zmusza nas on do tego, abyśmy zawsze mieli #subnav obecny w DOM, niezależnie od tego, czy jest wyświetlany, czy nie.)

Na koniec, jeśli #subnav jest ukryty, a #nav jest rozwinięty, ustawiamy lewy margines #main na 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Dzięki temu możemy połączyć wszystko bez żadnego ciężkiego kodu JavaScript, ale możemy również zobaczyć, jak skomplikowany może się ten kod stać, jeśli dodamy więcej elementów do strony. Po raz kolejny widzimy, że w CSS2 potrzebne jest dużo zakodowania wartości pozycji, aby wszystko działało poprawnie.

Wykorzystanie CSS3

CSS3 oferuje znacznie ulepszoną funkcjonalność i techniki układu, które sprawiają, że jest znacznie łatwiejszy w użyciu i znacznie mniej zależny od wartości zakodowanych na sztywno. CSS3 jest z natury zaprojektowany do obsługi bardziej dynamicznego zachowania i w tym sensie jest bardziej „programowalny”. Przyjrzyjmy się niektórym z tych nowych możliwości w odniesieniu do naszego przypadku użycia.

CSS3 `calc()` Funkcja

Nowa funkcja CSS3 calc() może być używana do dynamicznego obliczania wartości właściwości CSS (należy jednak pamiętać, że obsługa różni się w zależności od przeglądarki). Wyrażenie dostarczone do funkcji calc() może być dowolnym prostym wyrażeniem łączącym podstawowe operatory arytmetyczne ( + , - , * , / ) przy użyciu standardowych reguł pierwszeństwa operatorów.

Użycie funkcji calc() może pomóc w uniknięciu dużej części twardego kodowania wartości wymaganego przez CSS2. W naszym przypadku pozwala nam to na dynamiczną ekspansję CSS. Na przykład:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Z powyższą specyfikacją height za pomocą funkcji calc() , osiągamy ten sam wynik, co w CSS2 z top:6em i bottom:4em , ale w znacznie bardziej elastyczny i adaptacyjny sposób, bez konieczności zakodowania na sztywno top i bottom pozycji wartości.

Układ Flexbox w CSS3

Flexbox to nowy układ wprowadzony w CSS3 (obsługa różni się w zależności od przeglądarki). Układ Flexbox ułatwia rozmieszczenie elementów na stronie w sposób, który zachowuje się przewidywalnie na różnych rozmiarach ekranu, rozdzielczościach i urządzeniach. Jest więc szczególnie przydatny w kontekście responsywnego projektowania stron internetowych.

Najważniejsze cechy to:

Pozycjonowanie elementów podrzędnych jest znacznie łatwiejsze, a złożone układy można osiągnąć prościej i przy użyciu czystszego kodu.
Elementy podrzędne mogą być ułożone w dowolnym kierunku i mogą mieć elastyczne wymiary, aby dostosować się do wyświetlanej przestrzeni.
Elementy podrzędne automatycznie rozszerzają kontrakt, aby dostosować się do dostępnego wolnego miejsca.

Flexbox wprowadza swój własny, unikalny zestaw terminów i pojęć. Kilka z nich to:

Pojemnik elastyczny. Element z właściwością display ustawioną na flex lub inline-flex , który służy jako element kontenera dla elementów flex.
Element elastyczny. Dowolny element w kontenerze elastycznym. (Uwaga: tekst bezpośrednio zawarty w kontenerze flex jest opakowany w anonimowy element flex.)
Osie . Każdy układ flexbox ma flex-directio który wyznacza główną oś, wzdłuż której są rozmieszczone elementy flex. Oś poprzeczna jest wtedy osią prostopadłą do osi głównej.
Linie. Elementy Flex mogą być ułożone w jednej linii lub w kilku liniach zgodnie z właściwością flex-wrap .
Wymiary. Ekwiwalentami height i width flexbox są main size i cross size , które określają odpowiednio rozmiary osi głównej i osi poprzecznej kontenera elastycznego.

OK, więc z tym krótkim wprowadzeniem, oto alternatywny znacznik, którego możemy użyć, jeśli używamy układu flexbox:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

W naszym przykładowym przypadku użycia, nasz główny układ (nagłówek, treść, stopka) jest pionowy, więc ustawimy nasz flexbox tak, aby używał układu kolumnowego:

 .layout-flexbox { display: flex; flex-direction: column; }

Chociaż nasz główny układ jest pionowy, elementy w naszym obszarze zawartości (nav, subnav, main) są ułożone poziomo. Każdy kontener flex może zdefiniować tylko jeden kierunek (tj. jego układ musi być poziomy lub pionowy). Dlatego, gdy układ wymaga więcej niż to (częsty przypadek dotyczy układu aplikacji), możemy zagnieździć wiele kontenerów jeden w drugim, każdy z innym układem kierunkowym.

Dlatego dodaliśmy dodatkowy kontener (który nazwałem content-area ) otaczający #nav , #subnav i #main . W ten sposób ogólny układ może być pionowy, a zawartość obszaru zawartości może być ułożona poziomo.

Teraz, aby pozycjonować nasze elementy flex, użyjemy właściwości flex , która jest skrótem dla flex: <flex-grow> <flex-shrink> <flex-basis>; . Te trzy właściwości flex są tymi, które określają, w jaki sposób nasze elementy flex rozmieszczają pozostałą między nimi wolną przestrzeń w kierunku przepływu, w następujący sposób:

flex-grow: określa, jak bardzo element może urosnąć w stosunku do pozostałych elastycznych elementów w tym samym pojemniku
flex-shrink: określa, w jaki sposób element może się kurczyć w stosunku do reszty elastycznych elementów w tym samym pojemniku
flex-basis: określa początkowy rozmiar elementu (tj. zanim się zmniejszy lub powiększy)

Ustawienie flex-grow i flex-shrink na zero oznacza, że rozmiar elementu jest stały i nie będzie rósł ani kurczył się, aby pomieścić mniej lub więcej wolnego miejsca. Oto, co robimy dla naszego nagłówka i stopki, ponieważ mają one stały rozmiar:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Aby element zajmował całą dostępną wolną przestrzeń, ustaw jego wartości flex-grow i flex-shrink na 1 i ustaw jego wartość flex-basis na auto . To właśnie robimy dla obszaru zawartości, ponieważ chcemy, aby zajmował całą dostępną wolną przestrzeń.

I tak jak powiedzieliśmy wcześniej, chcemy, aby elementy wewnątrz content-area były ułożone w kierunku wiersza, więc dodamy display: flex ; i flex-direction: row; . To sprawia, że obszar zawartości jest nowym elastycznym kontenerem dla #nav , #subnav i `#main.

Oto, co kończymy w CSS dla content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

W obszarze zawartości zarówno #nav , jak i #subnav mają stałe rozmiary, więc po prostu ustawiamy odpowiednio właściwość flex :

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Zauważ, że dodałem overflow-y: hidden w tych specyfikacjach CSS, aby pokonać zawartość przekraczającą i przepełniającą wysokość kontenera. Chrome faktycznie tego nie potrzebuje, ale FireFox tak.)

#main zajmie resztę wolnego miejsca:

 #main { flex: 1 1 auto; overflow-y: auto; }

To wszystko wygląda dobrze, więc teraz dodajmy do tego nasze dynamiczne zachowanie i zobaczmy, jak to pójdzie.

JavaScript jest identyczny z tym, który mieliśmy wcześniej (z wyjątkiem tego, że klasa kontenera elementów CSS, którą określamy, to layout-flexbox podczas gdy wcześniej była to layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Dodajemy expanded klasę do CSS w następujący sposób:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

I voila!

Zauważ, że tym razem nie musimy informować innych elementów o zmianie szerokości, ponieważ układ Flexbox obsługuje to wszystko za nas.

Jedyne, co pozostało, to ukrycie łodzi podwodnej. I zgadnij co? To też „po prostu działa”, bez żadnych dodatkowych zmian, używając tego samego kodu JavaScript, co poprzednio. Flexbox wie o wolnej przestrzeni i automatycznie sprawia, że nasz układ działa bez dodatkowego kodu. Całkiem fajne.

Flexbox zapewnia również kilka ciekawych sposobów centrowania zarówno elementów pionowych, jak i poziomych. Zdajemy sobie tutaj sprawę, jak ważne jest, aby język prezentacyjny zawierał pojęcie wolnej przestrzeni i jak skalowalny może stać się nasz kod przy użyciu tego rodzaju technik. Z drugiej strony, opanowanie tutaj pojęć i notacji może zająć nieco więcej niż klasyczny CSS.

Układ siatki CSS3

Jeśli układ Flexbox znajduje się w czołówce CSS3, można powiedzieć, że układ siatki jest na krawędzi. Specyfikacja W3C jest wciąż w stanie roboczym i nadal ma dość ograniczoną obsługę przeglądarek. (Jest włączony w Chrome za pomocą flagi „eksperymentalne funkcje platformy internetowej” w chrome://flags).

To powiedziawszy, osobiście nie uważam tego projektu za rewolucyjny. Raczej, jak mówią zasady projektowania HTML5: „Kiedy jakaś praktyka jest już powszechna wśród autorów, rozważ jej przyjęcie, zamiast zabraniać jej lub wymyślać czegoś nowego”.

W związku z tym siatki oparte na znacznikach były używane przez długi czas, więc teraz CSS Grid Layout po prostu podąża za tym samym paradygmatem, oferując wszystkie swoje zalety i wiele więcej w warstwie prezentacji bez wymagań dotyczących znaczników.

Ogólną ideą jest posiadanie predefiniowanego, stałego lub elastycznego układu siatki, w którym możemy umieszczać nasze elementy. Podobnie jak flexbox, działa również na zasadzie wolnej przestrzeni i pozwala nam zdefiniować zarówno pionowe, jak i poziome „kierunki” w tym samym elemencie, co zapewnia korzyści w zakresie rozmiaru kodu i elastyczności.

Układ siatki wprowadza 2 rodzaje siatek; mianowicie wyraźne i dorozumiane . Dla uproszczenia skupimy się w tym na wyraźnych siatkach.

Podobnie jak flexbox, układ Grid wprowadza swój własny, unikalny zestaw terminów i pojęć. Kilka z nich to:

Pojemnik na siatkę. Element z właściwością display ustawioną na „grid” lub „inline-grid”, w którym zawarte elementy są rozmieszczane przez pozycjonowanie i wyrównywanie do wstępnie zdefiniowanej siatki (tryb jawny). Siatka to przecinający się zestaw poziomych i pionowych linii siatki, które dzielą przestrzeń kontenera siatki na komórki siatki. Istnieją dwa zestawy linii siatki; jeden do definiowania kolumn i jeden prostopadły do niego do definiowania rzędów.
Tor siatki. Przestrzeń między dwiema sąsiednimi liniami siatki. Każdej ścieżce siatki jest przypisana funkcja zmiany rozmiaru, która kontroluje, jak szeroko lub wysoko może rosnąć kolumna lub wiersz, a tym samym jak daleko od siebie znajdują się jej ograniczające linie siatki.
Komórka siatki. Przestrzeń między dwoma sąsiednimi rzędami i dwiema sąsiednimi liniami siatki słupów. Jest to najmniejsza jednostka siatki, do której można się odnieść podczas pozycjonowania elementów siatki.
Elastyczna długość. Wymiar określony za pomocą jednostki fr , która reprezentuje ułamek wolnego miejsca w kontenerze siatki.

Oto alternatywny znacznik, którego możemy użyć, jeśli używamy układu siatki:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Zauważ, że w tym układzie nie potrzebujemy dodatkowego opakowania dla obszaru zawartości, jak to zrobiliśmy w przypadku flexbox, ponieważ ten typ układu pozwala nam zdefiniować oznaczenie przestrzeni elementów w obu kierunkach w tym samym kontenerze siatki.

Przejdźmy teraz do CSS:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Zdefiniowaliśmy display: grid; na naszym kontenerze. Właściwości grid-template-columns i grid-template-rows są określane jako lista odstępów między ścieżkami siatki. Innymi słowy, te wartości nie są pozycją linii siatki; raczej reprezentują ilość miejsca między dwoma ścieżkami.

Zwróć uwagę, że jednostki miary można określić jako:

długość
procent wielkości pojemnika z siatką
pomiar zawartości zajmującej kolumnę lub wiersz, lub
ułamek wolnej przestrzeni w siatce

Tak więc z grid-template-columns: auto 0 auto 1em 1fr; będziemy mieli:

1 ścieżka definiująca 2 kolumny auto szerokości ( #nav )
1 rynna 0 (margines dla #subnav jest na poziomie elementu, ponieważ może być obecny lub nie, w ten sposób unikniemy podwójnej rynny)
1 ścieżka definiująca 2 kolumny auto szerokości ( #subnav space)
1 rynna z 1em
1 utwór wykorzystujący 1fr dla #main (zabierze całe pozostałe miejsce)

Tutaj intensywnie używamy wartości auto dla ścieżki, co pozwala nam mieć dynamiczne kolumny, w których położenie i rozmiar linii są określone przez ich maksymalną zawartość. (Będziemy zatem musieli określić rozmiary elementów #nav i #subnav , co wkrótce zrobimy).

Podobnie dla linii wierszy mamy wiersze grid-template-rows: 5em 1em 1fr 1em 3em; który ustawia nasze # #footer #header stałe, a wszystkie elementy pomiędzy nimi wykorzystują pozostałą wolną przestrzeń podczas korzystania z rynien 1em .

Zobaczmy teraz, jak umieszczamy rzeczywiste elementy, które mają być pozycjonowane w naszej zdefiniowanej siatce:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Określa to, że chcemy, aby nasz nagłówek znajdował się między liniami siatki 1 i 6 (pełna szerokość) oraz między liniami siatki 1 i 2 dla naszych wierszy. To samo dla stopki, ale między dwoma ostatnimi wierszami (zamiast dwóch pierwszych). A główny obszar jest ustawiony odpowiednio do przestrzeni, którą ma zajmować.

Należy zauważyć, że właściwości grid-column i grid-row są skrótami określania odpowiednio grid-column-start / grid-column-end i grid-row-start / grid-row-end .

OK, wróćmy więc do #nav i #subnav . Ponieważ wcześniej umieściliśmy #nav i #subnav na ścieżce z wartościami automatycznymi, musimy określić, jak szerokie są te elementy (to samo w przypadku trybu rozwiniętego, po prostu zmieniamy jego szerokość, a układ siatki zajmie się resztą).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Więc teraz możemy przełączyć nasz #nav , a także ukryć/usunąć #subnav i wszystko działa idealnie! Układ siatki pozwala nam również używać aliasów dla naszych linii, więc ostatecznie zmiana siatek nie spowoduje wyłamania kodu, ponieważ jest on mapowany na nazwę, a nie linię siatki. Zdecydowanie czekam na to, że będzie to szerzej obsługiwane przez więcej przeglądarek.

Wniosek

Nawet przy użyciu klasycznych technik CSS można osiągnąć znacznie więcej, niż wielu programistów internetowych zdaje sobie sprawę lub z których korzysta. To powiedziawszy, wiele z tych czynności może być dość żmudnych i może wiązać się z wielokrotnym zakodowaniem wartości w całym arkuszu stylów.

CSS3 zaczął dostarczać znacznie bardziej wyrafinowane i elastyczne techniki układania, które są znacznie łatwiejsze do zaprogramowania i które pozwalają uniknąć nudy wcześniejszych specyfikacji CSS.

Opanowanie tych technik i paradygmatów – zarówno w przypadku CSS2, jak i CSS3 – jest niezbędne do wykorzystania wszystkiego, co ma do zaoferowania CSS, aby zoptymalizować zarówno wrażenia użytkownika, jak i jakość kodu. Ten artykuł to tylko wierzchołek góry lodowej wszystkiego, czego można się nauczyć i wszystkiego, co można osiągnąć dzięki mocy i elastyczności CSS. Mają na to!

Powiązane: *Odkrywanie SMACSS: skalowalna i modułowa architektura dla CSS*