Jak stworzyć prosty układ za pomocą układów siatki CSS

Jeśli kiedykolwiek parałeś się projektowaniem do druku, wiesz, skąd wziął się pomysł układu siatki. Siatka to precyzyjne narzędzie pomiarowe używane do pozycjonowania elementów projektu na stronie. Ten pomysł jest często używany w sieci do organizowania i ujednolicania treści, co zapewnia użytkownikom lepsze wrażenia z oglądania.

Kiedy praktyka projektowania stron internetowych była nowa, układy były dość proste. Nagłówek, pasek boczny, obszar zawartości i stopka. Teraz, wraz z ewolucją sieci, nasze układy stały się bardziej złożone i jako projektanci stron internetowych mamy o wiele więcej problemów. Często potrzebujemy między innymi wielu regionów treści, responsywnego projektu, wielu projektów szablonów układu strony. Aby zaimplementować projekt i zapewnić jego prawidłowe wyświetlanie, wymagane są pływaki i pozycjonowanie. Pływaki brzmią prosto, ale czasami praca z nimi może być trudna.

Na szczęście siatka zapewnia łatwiejszy sposób projektowania i wyświetlania treści internetowych. To wspaniały czas na bycie projektantem, ponieważ CSS Grid Layouts szybko zyskuje na popularności. Może się wydawać, że siatki były nowym pomysłem w projektowaniu stron internetowych w ostatnich latach, ale wierzcie lub nie, CSS Grid Layouts działa od wielu lat. Obsługa ich w przeglądarkach pojawiła się bardzo szybko, więc teraz mogą pomóc złagodzić frustrację związaną z pozycjonowaniem, z którą projektanci musieli sobie radzić przez wiele lat.

Nadszedł wreszcie czas, aby włamać się do sieci i odkryć nowe możliwości projektowe!

Obsługa siatki CSS

Wszystko zależy od przeglądarek, które chcesz obsługiwać, ale istnieje całkiem spora szansa, że ​​nie musisz się martwić o „tryb flagi” podczas korzystania z CSS Grids. Zawsze możesz odwiedzić dokumentację Can I Use, aby dokładnie sprawdzić, ale obsługa CSS Grids znacznie wzrosła i wielu projektantów może używać jej w produkcji, co jest powodem do świętowania!

Podstawy układu siatki CSS

Wykorzystując CSS, układy siatki pomogą zdefiniować obszary treści na Twojej stronie internetowej. Istnieje stosunkowo nowy zestaw właściwości zdefiniowany w Specyfikacjach układu siatki CSS. To doskonałe źródło informacji, jeśli chcesz dowiedzieć się więcej o tym nowym sposobie projektowania układu. Układy siatki CSS pomagają uprościć rzeczy i ułatwić tworzenie układów. Pomyśl o siatce jako strukturze, w której można zdefiniować pomiary.

Części siatki

Linie

W tym przypadku jest pięć linii pionowych i trzy linie poziome. Wierszom nadawane są numery zaczynające się od jedynki. W tym przykładzie pionowe linie są pokazane od lewej do prawej, ale zależy to od kierunku pisania. Ponieważ to pokazuje czytanie od lewej do prawej, jeśli jest to od prawej do lewej, sytuacja zostanie odwrócona. Liniom można nadać nazwy (opcjonalnie), co pomaga w odwoływaniu się do nich w CSS.

Utwory

Tor to przestrzeń między dwiema równoległymi liniami. Na schemacie są cztery tory pionowe i dwa tory poziome. Istnieje wielki podwójny wysiłek między liniami i ścieżkami. Linie to świetny sposób na odniesienie się do początku i końca treści. Utwory są tam, gdzie faktycznie trafia treść.

Komórki

Komórki znajdują się tam, gdzie spotykają się tory poziome i pionowe. Na diagramie znajduje się osiem komórek.

Obszary

Komórki wchodzą w grę przy określaniu obszarów. Obszar to prostokątny kształt, który może obejmować wiele komórek. Podobnie jak linie, obszarom można opcjonalnie nadać nazwy. Na diagramie znajduje się kilka etykiet: „A”, „B” i „C”.

Tworzenie układu siatki

Pomocne może być naszkicowanie elementów przed rozpoczęciem tworzenia układu. Nie ma substytutu dla starego, dobrego papieru milimetrowego.

HTML dla siatki

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Pojemnik jest bardzo ważny. W kontenerze znajdują się różne bloki treści dla witryny. Kolejność elementów siatki w kontenerze nie ma znaczenia. Następnie użyjemy CSS, aby umieścić je w naszym układzie.

style CSS

Po zakończeniu znaczników HTML najważniejsza deklaracja jest wykonywana w CSS. W kontenerze musisz zastosować display:grid lub display:inline-grid . Użyj display:grid , jeśli chcesz mieć siatkę na poziomie bloku. Użyj display:inline-grid dla siatek na poziomie inline.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Właściwości grid-template-columns i grid-template-rows służą do określania szerokości wierszy i kolumn. grid-template-columns zostały ustawione jako 1fr i 3fr. W tym miejscu siatka nabiera kształtu z jednostkami ułamkowymi. Przy tych wartościach widać, że są dwie kolumny i nie są one równej szerokości. Kolumna ustawiona na 3fr jest trzy razy szersza od drugiej. To wyjaśnia, dlaczego pasek boczny wydaje się węższy niż obszar zawartości.

Można wprowadzić responsywne dostosowania, ale użycie jednostek ułamkowych to świetny pierwszy krok. Odstępy między obszarami można kontrolować za pomocą grid-column-gamp i grid-row-gap .

Wszystko wygląda dość ciasno, ale z kilkoma dodatkowymi specyfikacjami wszystko nabierze kształtu.

Ten przykład zaczyna się od umieszczenia nagłówka, ale elementy można umieścić w dowolnej kolejności, która najbardziej Ci odpowiada. Jeśli chcesz zacząć od stopki, to też zadziała.

Zacznijmy od nagłówka, który przechodzi od linii kolumny 1 do linii kolumny 4 i linii wiersza 1 do linii wiersza 2. CSS będzie wyglądał następująco:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Możesz zauważyć, że pasek boczny jest spłaszczony i nie bardzo go widzimy. Będziemy musieli trochę przeorganizować. W tym układzie odniesienia do linii w celu uzyskania miejsca pomogą w aranżacji. Linie działają jak wytyczne. Nagłówek znajduje się między linią w wierszu pierwszym a linią w wierszu drugim. W przypadku paska bocznego rozpocznie się on w wierszu trzecim i zakończy w wierszu szóstym. Wiersz nagłówka kończył się na dwóch, więc ten zostanie umieszczony tuż pod nim. Aby zobaczyć przykład, zobacz projekt na Codepen.

Używamy grid-column-start aby określić początkową linię pionową dla elementu. W tym przypadku byłby ustawiony na trzy. grid-column-end wskazuje końcową linię pionową elementu. W tym przypadku ta właściwość byłaby równa cztery. Inne wartości wierszy również zostaną ustawione w ten sam sposób. Umieszczenie paska bocznego jest tam, jest po prostu przykryte obszarem zawartości.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Główna treść zaczyna się w kolumnie trzeciej i kończy w kolumnie czwartej. Górna część paska bocznego i obszar zawartości są równe, więc oba mają grid-row-start trzech. Być może zastanawiasz się, w jaki sposób zawartość i pasek boczny są znacznie wyższe. Umieszczając wysokość na kontenerze, w tym przypadku 400 pikseli, jest on teraz wyższy niż inne elementy.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Dwa ostatnie obszary zawartości to obszar dodatkowej zawartości i stopka.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Deklaracje zakończenia i rozpoczęcia można pisać wydajniej. Możesz zobaczyć grid-column-start: 1; i grid-column-end: 3; napisany skrótowo. Wyglądałoby to jak grid-column: 1 / 3; . Ten sam pomysł można wykorzystać do zadeklarowania informacji o wierszach kolumn.

Responsywne zalety

Teraz, gdy układ został utworzony, wydaje się bardzo „komputerowy”. A co z tabletami i urządzeniami mobilnymi? Układy siatki CSS dobrze współpracują z zapytaniami o media, dzięki czemu projekt można dostosować do różnych rozmiarów ekranu. Naprawdę fajne jest to, że możesz zmieniać obszary zawartości w tych różnych punktach przerwania zapytań o media. Jako projektant oznacza to, że wybierasz to, co jest najlepsze dla twojego układu w różnych punktach przerwania. Na przykład, jeśli chcesz, aby „dodatkowa treść” była umieszczona nad obszarem „zawartości”, możesz określić poprawne kolumny i wiersze.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Dzięki temu, że kolumny zaczynają się od 1, a kończą na 4, uzyskaliśmy pełną szerokość obszarów zawartości. Wiersze siatki są umieszczane w taki sposób, że „dodatkowa treść” znajduje się teraz nad „zawartością”.

Narzędzie przeglądarki do układu siatki CSS

Gdy projektujesz układy lub przeglądasz inne witryny, Firefox oferuje doskonałe narzędzie do pracy z układami siatki CSS. Nazywa się CSS Grid Playground i sprawia, że ​​badanie siatki jest bardzo intuicyjne. Przechodząc do inspektora, na karcie układu dostępna jest opcja wizualnego zobaczenia, jak zbudowana jest siatka. Ułatwi to proces projektowania, mając to narzędzie do zbadania, w jaki sposób różne właściwości siatki wpływają na ogólny układ i projekt siatki.

Układy siatki CSS to nowy, ekscytujący sposób tworzenia układów stron internetowych. Jak widać, tworzenie prostego układu strony jest dość łatwe. Ten prosty przykład jest dobrą podstawą do tworzenia bardziej złożonych układów. Ponieważ zyskuje na popularności, ta technologia będzie miała przewagę podczas projektowania dla różnych urządzeń i punktów przerwania z możliwością dostosowania układu.