Układ kolumnowy - CSS Grid Layout

W poprzednim rozdziale nauczyliśmy się tworzyć trójkolumnowy układ strony, z wykorzystaniem dość starej techniki float. Przyjrzyjmy się, jak można zrobić to nieco inaczej, używając nowszej i prostszej metody o nazwie CSS Grid Layout.

Przypomnijmy najpierw, starym zwyczajem, kod HTML, na którym będziemy pracować:

<div class="main-container">
  <nav class="site-menu">
    tu wstaw kod z menu
  </nav>
  <div class="main-content">
    <article>tu wstaw kod artykułu</article>
    <form>tu wstaw kod formularza</form>
  </div>
  <aside class="sidebar">
    <div>tu wstaw kod prawej kolumny</div>
  </aside>
</div>

Ustaliliśmy sobie, że trzema kolumnami, na których najbardziej nam zależało, będą elementy: <nav class="site-menu">, <div class="main-content"> oraz <aside class="sidebar">. Wszystkie trzy umieściliśmy w znaczniku <div class="main-container">, który pełni dla nich rolę tzw. rodzica. Aby powyższe bloki układały się jeden przy drugim, zaaplikowaliśmy do każdego z nich float: left:

.site-menu,
.main-content,
.sidebar {
  float: left;
}

W tym rozdziale usuniemy float: left, a potem wstawimy kilka nowych własności CSS, które spowodują ten sam co floaty efekt. Będzie to własnie CSS Grid. Poza własnością float, należy również usunąć szerokości, które nadaliśmy naszym elementom, ponieważ o nie również zadba grid. A więc kod CSS, z którym startujemy, wygląda tak:

.main-container {
  max-width: 960px;
  margin: auto;
}

.main-content {
  background-color: Bisque;
}

.site-menu {
  background-color: LightCyan;
}

.sidebar {
  background-color: Gold;
}

Aby skorzystać z gridu, będziemy musieli dodać do rodzica własność display: grid. Nim to zrobimy, sprawdźmy (stan na październik 2019) wsparcie przeglądarek dla tych własności w serwisie CanIUse.com:

Jasny zielony kolor oznacza, że dana własność jest wspierana, ciemny zielony, tzw. zgniły, że jest częściowo wspierana i to nierzadko pod pewnymi warunkami. Jak widzimy, dla IE11 musimy użyć prefixu -ms:

Wygląda jednak na to, że bardzo wiele współczesnych przeglądarek rozumie, czym jest CSS Grid Layout. Liczba na środku prostokąta oznacza oczywiście wersje danej przeglądarki, w której to wsparcie jest zaimplementowane. A więc do dzieła!

Aby rozpocząć przygodę z gridami (a więc i kolumnami), należy pomyśleć i poszukać takiego znacznika, który będzie pełnił rolę rodzica i w nim wyświetlały się będą nasze trzy kolumny. W naszym przykładzie jest to oczywiście <div class="main-container">. Nadajemy mu display: grid:

.main-container {
  max-width: 960px;
  margin: auto;
  display: -ms-grid;
  display: grid;
}

Pierwsze dwie linijki w deklaracji stylów to max-width oraz margin: auto, znane z poprzedniego rozdziału, a więc dodaliśmy jedynie na koniec dwa oznaczenia: display: -ms-grid (będzie to specjalna deklaracja, którą zrozumie przeglądarka IE11) i display: grid.

Jak widzimy, efekt jest mizerny, bo wszystko nadal układa się jedno pod drugim. Należy sprawić, by kolumny były znów obok siebie i miały określone szerokości. Jak zapewne orientujesz się, oprócz własnosci float, usunęliśmy również szerokość 20% z elementów .site-menu oraz .sidebar, a także 60% z .main-content. Należałoby je w pewien sposób przywrócić, ale tym razem na modłę CSS Grid. Użyjemy do tego własności grid-template-columns.

.main-container {
  max-width: 960px;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-template-columns: 20% 60% 20%;
  grid-template-columns: 20% 60% 20%;
}

Własność tę dodajemy również do głównego kontenera "rodzica". Jak widzisz, podaliśmy wartości naszych szerokości jedna po drugiej, oddzielając każdą spacją. Oznacza to mniej więcej to, że pierwsza wartość to szerokość dla pierwszej kolumny, druga dla drugiej, trzecia dla trzeciej. A więc pierwsza kolumna ma mieć 20% szerokości, druga 60%, a trzecia 20%. Jak widzisz, nie musimy już skakać po konkretnych elementach jak .sidebar, by nadać im szerokość. Wystarczy, że wszystko zdefiniujemy dla rodzica. Wynikowy kod CSS prezentuje się następująco:

.main-container {
  max-width: 960px;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-template-columns: 20% 60% 20%;
  grid-template-columns: 20% 60% 20%;
}

.main-content {
  background-color: Bisque;
}

.site-menu {
  background-color: LightCyan;
}

.sidebar {
  background-color: Gold;
}

Oczywiście CSS Grid Layout jest o wiele bardziej rozbudowany, stosuje się też często inne jednostki niż procenty. O tym wszystkim jednak dowiesz się na dalszej drodze kariery twórcy stron internetowych.