Jak stworzyć prosty układ za pomocą CSS Grid Layouts

Jeśli kiedykolwiek parałeś się projektowaniem druku, wiesz, skąd wziął się pomysł na układy siatek. Siatka to precyzyjne narzędzie pomiarowe służące do umieszczania elementów projektu na stronie. Ten pomysł jest często używany w Internecie, aby uporządkować i ujednolicić treść, zapewniając 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, gdy sieć ewoluowała, nasze układy stały się bardziej złożone i jako projektanci stron internetowych mamy o wiele więcej do pokonania. 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 uzyskać prawidłowe wyświetlanie, wymagane są pływaki i pozycjonowanie. Pływaki brzmią prosto, ale czasami mogą być trudne w obsłudze.

Na szczęście siatka zapewnia łatwiejszy sposób projektowania i wyświetlania treści internetowych. To świetny czas na bycie projektantem, ponieważ układy CSS Grid Layouts szybko zyskują na popularności. Może wydawać się, że gridy były nowym pomysłem w projektowaniu stron internetowych w ostatnich latach, ale wierzcie lub nie, CSS Grid Layouts był w pracy od wielu lat. Wsparcie przeglądarek nastąpiło bardzo szybko, więc teraz mogą pomóc złagodzić frustrację związaną z pozycjonowaniem, z którą projektanci musieli się zmagać od wielu lat.

W końcu nadszedł czas, aby włamać się do siatki i odkryć nowe możliwości projektowania!

Obsługa siatki CSS

Wszystko zależy od przeglądarek, które musisz obsługiwać, ale jest 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 wsparcie dla CSS Grids dramatycznie wzrosło i wielu projektantów jest w stanie używać go w produkcji, co jest powodem do świętowania!

Podstawy układu siatki CSS

Dzięki wykorzystaniu CSS układy siatki pomogą zdefiniować obszary treści na Twojej stronie internetowej. W Specyfikacjach układu siatki CSS zdefiniowano stosunkowo nowy zestaw właściwości. Jest to świetne źródło, do którego można się odnieść, gdy dowiesz się więcej o tym nowym sposobie projektowania układu. Układy siatki CSS pomagają uprościć rzeczy i ułatwiają tworzenie układów. Pomyśl o siatce jako o strukturze, w której można zdefiniować pomiary.

Części siatki

Linie

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

Utwory

Tor to przestrzeń pomiędzy dwiema równoległymi liniami. Na schemacie są cztery tory pionowe i dwie tory poziome. Istnieje wielki podwójny wysiłek między liniami i torami. Linie to świetny sposób na wskazanie, gdzie zaczyna się i kończy treść. Utwory to miejsce, do którego trafia zawartość.

Komórki

Komórki znajdują się w miejscu, w którym spotykają się ścieżka pozioma i pionowa. Na schemacie znajduje się osiem komórek.

Obszary

Komórki wchodzą w grę podczas określania obszarów. Obszar to prostokątny kształt, który może obejmować kilka komórek. Podobnie jak linie, obszary można opcjonalnie nazwać. Na schemacie znajduje się kilka etykiet: „A”, „B” i „C”.

Tworzenie układu siatki

Pomocne może być naszkicowanie rzeczy przed rozpoczęciem tworzenia układu. Nic nie zastąpi starego dobrego papieru milimetrowego.

HTML dla siatki

<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>

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

Gdy skończysz ze znacznikami 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 bloków. Użyj display:inline-grid dla siatek wbudowanych. Aby dowiedzieć się więcej, zapoznaj się z tym wspaniałym przewodnikiem.

.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;
}

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 mają równej szerokości. Kolumna ustawiona na 3fr jest trzykrotnie szersza od drugiej. To wyjaśnia, w jaki sposób pasek boczny wydaje się węższy niż obszar zawartości.

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

Sprawy wyglądają dość ciasno, ale z kilkoma dodatkowymi specyfikacjami, sprawy nabiorą kształtu.

Ten przykład zaczyna się od umieszczenia nagłówka, ale elementy można umieszczać 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 wiersza kolumny 1 do wiersza kolumny 4 i wiersza wiersza 1 do wiersza wiersza 2. CSS będzie wyglądał tak:

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

Możesz zauważyć, że pasek boczny jest ściśnięty i nie widzimy go zbyt wiele. Będziemy musieli trochę przearanżować. W tym układzie odwoływanie się do linii w celu uzyskania rozmieszczenia pomoże w aranżacji. Linie pełnią rolę wskazówek. Nagłówek znajduje się między linią w pierwszym rzędzie a linią w drugim rzędzie. W przypadku paska bocznego zaczyna się w trzecim rzędzie i kończy w szóstym wierszu. Wiersz nagłówka kończy się na dwóch, więc 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łaby ustawiona na trzy. grid-column-end wskazuje końcową linię pionową dla elementu. W tym przypadku ta własność byłaby równa czterem. Inne wartości wierszy również zostaną ustawione w ten sam sposób. Umieszczenie paska bocznego jest tam, jest po prostu objęte obszarem zawartości.

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

Główna treść zaczyna się w kolumnie trzeciej i kończy w kolumnie czwartej. Górna część paska bocznego i obszaru zawartości są parzyste, więc oba mają grid-row-start równy trzy. Być może zastanawiasz się, dlaczego treść i pasek boczny są znacznie wyższe. Ustawiając wysokość na kontenerze, w tym przypadku 400px, jest on teraz wyższy niż pozostałe elementy.

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

Ostatnie dwa obszary zawartości to obszar dodatkowej zawartości i stopka.

.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;
}  

Deklaracje końca i początku można pisać wydajniej. Możesz zobaczyć grid-column-start: 1; i grid-column-end: 3; napisane stenograficznie. To wyglądałoby jak grid-column: 1 / 3; . Ten sam pomysł można wykorzystać do deklarowania informacji o wierszach kolumn.

Responsywne korzyści

Teraz, gdy utworzono układ, wydaje się, że jest to bardzo „pulpit”. 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 treś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 „treść”, możesz określić prawidłowe kolumny i wiersze.

/* 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;
  }

Dzięki temu, że kolumny zaczynają się od jednej, a kończą na czwartej, obszary zawartości mają pełną szerokość. Wiersze siatki są umieszczone tak, że „dodatkowa zawartość” znajduje się teraz nad „zawartością”.

Przeglądarka dla CSS Grid Layout

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 można zobaczyć, jak zbudowana jest siatka. Ułatwi to proces projektowania dzięki temu narzędziu, aby zbadać, 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 całkiem łatwe. Ten prosty przykład jest dobrą podstawą do tworzenia bardziej złożonych układów. Ponieważ ta technologia 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.

Ten artykuł został pierwotnie opublikowany 3 sierpnia 2016 r. Ostatnia aktualizacja miała miejsce 6 grudnia 2017 r.