CSS Grid Poradnik PL – DARMOWY kurs z CSS Grida!

css grid poradnik Polska

W poniższym poradniku z CSS Grida w wersji polskiej zapoznam Was z podstawami CSS Grida, który całkowicie odmienia tworzenie responsywnych stron internetowych! Jest to jeden z niewielu kompleksowych kursów z CSS Grida – w dodatku dostępny za darmo i w języku polskim 😉

Co to jest CSS Grid?

Najpierw krótki wstęp – czym jest CSS Grid? Jest to najbardziej wydajny sposób tworzenia responsywnych szablonów dostępny w CSSie. CSS Grid pozwala pracować w systemie dwu-wymiarowym. CSS Grid staje się coraz popularniejszy, posiada wsparcie najpopularniejszych przeglądarek oraz umożliwia nam tworzyć w prosty sposób, w pełni responsywne strony. Niektórzy uważają, że CSS Grid wyprze w pełni frameworki takie jak Bootstrap, ponieważ pozbywamy się w nim tzw „boiler code’u” (zbędnego kodu) – zresztą sami zaraz polubicie CSS Grida!

Wsparcie CSS Grida przez przeglądarki

wsparcie dla css grida

Jak można zauważyć wsparcie dla CSS Grida jest wysokie. Nieuniknione jest to, że pozostałe przeglądarki, które nie wspierają jeszcze CSS Grida, w najbliższym czasie dołączą do grona zielonych 🙂

Jeśli nasza strona internetowa musi w pełni wspierać wszystkie przeglądarki, w tym te o starszych wersjach, powinniśmy mieć na uwadze to, że warto dostosować swój szablon pod przeglądarki, które nie wspierają CSS Grida.

css grid jak dziala

Jak wygląda używanie CSS Grida?

Jak wspomniałem wcześniej, CSS Grid pozwala nam tworzyć strony pozbawione zbędnego kodu, który występuje na przykład korzystając z Bootstrapa.

Szablon CSS Grida opiera się na dwóch głównych elementach: kontenerze/pojemniku (ang. grid container) naszego szablonu oraz jego wewnętrznych elementach (ang. grid items). Odpowiednio jednymi, jak i drugimi możemy zarządzać poprzez odpowiednie zmiany w kodzie.

CSS Grid poradnik PL!

Spójrzcie na poniższy kod:

See the Pen jKmzpd by smk (@selfmadeking) on CodePen.

Display: grid

Obstawiam, że podstawy HTMLa oraz CSSa macie za sobą (jak nie to do roboty!). Co nowego pojawia się w standardowym szablonie CSS Grida?

display: grid;

Element (w naszym przypadku body,  ale może to być np div otaczający stronę) staje się kontenerem naszego szablonu. To w nim będziemy umieszczać wewnętrzne elementy i nimi zarządzać.

Grid-template-columns

grid-template-columns: auto;

grid-template-rows: 40px auto 45px;

Pierwsza linijka ustala ilość kolumn naszej siatki. Możemy wykorzystać tu wartości takie jak auto, fr, px  czy %.

Jednostka „fr”

Czym jest jednostka fr? Jest to  elastyczna jednostka – frakcja, gdzie 1 frakcja odpowiada 1 części dostępnej przestrzeni. Co za tym idzie:

grid-template-columns: 1fr 1fr 1fr;

css grid przyklad

Utworzy nam siatkę z trzema kolumnami, każda o rozmiarze jednej frakcji, czyli wolnej przestrzeni. W tym przypadku podzielimy stronę na 3 równe kolumny.

grid-template-columns: 2fr 1fr;

css grid przyklad 2

Tutaj dla dwóch elementów pierwszy zajmie dwie frakcje oraz kolejny jedną.

Grid-template-rows

grid-template-rows: 40px auto 45px;

Ten element kodu odpowiada za rzędy (ang. rows) naszego kontenera. W tym przypadku tworzymy trzy rzędy. Dwa z wartościami stałymi, określonymi pikselami oraz środkowy z automatyczną wysokością.

 

Jak możecie zauważyć w wartościach kolumn określamy szerokości naszych elementów, a w wartościach rzędów ich wysokość.

height: 100vh;

Wysokość dla kontenera szablonu CSS Grida, aby szablon wyświetlał się na całą wysokość strony.

Grid-row

header{
grid-row: 1;
}

Wartość ta określa, w którym rzędzie naszego kontenera ma znajdować się dany element.

Grid-column

header{
grid-column: 1;
}

Grid-column określa w jakich kolumnach ma znajdować się wybrany element.

Wartości dla grid-column i grid-row

W powyższych własnościach możemy określić kolumny i rzędy w prosty sposób, podając numer określonej kolumny lub rzędu:

grid-row: 1;
grid-column: 1;

Jednak co w przypadku, gdy chcemy wykorzystać dwie kolumny dla elementu czy trzy rzędy? Mamy do tego przynajmniej dwa rozwiązania:

grid-row: 1 /  4;
grid-column: 1 / 3;

lub

grid-row: 1 /span 2;
grid-column: 1 / span 1;

Skąd wzięły się te wartości?
Stąd, że budując szablon oparty na CSS Gridzie możemy zarządzać liniami, oddzielającymi poszczególne kolumny i rzędy. Spójrzmy na poniższy obrazek:

css grid przyklad 3

Grid

body{
display: grid;
grid-template-columns: 2fr 1fr;
height: 100vh;
}

Sekcje czerwone
Automatycznie dopasowały się do kolumn – pierwsza na dwie frakcje, druga na jedną. Nie wykroczyły poza pierwszy rząd.

Sekcja niebieska

section{
grid-column: 1 / span 2;
}

Objęcie kolumny od pierwszej do trzeciej linii siatki.

Jakiej linii?
css grid linie

Stąd  1 / span 2 mówi, że element zaczyna się od pierwszej linii, a kończy dwie kolejne dalej, czyli w tym przypadku zajmuje długość całego szablonu.

Grid wewnątrz głównego CSS grid’a

Przyjrzyjmy się poniższemu fragmentowi kodu

See the Pen jKmxaE by smk (@selfmadeking) on CodePen.

Posiadamy startowy layout CSS Grida jak w poprzednim przykładzie, z tym że tutaj wykorzystaliśmy element main jako kolejny grid, dla elementów wewnątrz niego.

Sytuacja wygląda tak samo, jak w przypadku głównego kontenera (u nas body), jednak jesteśmy ograniczeni co do rozmiarów naszego kontenera main, ponieważ musimy pamiętać, że jego rozmiar określony jest dla głównego kontenera.

Jednak dzięki ustaleniu elementu main jako kolejnego kontenera, możemy zarządzać ustawieniem elementów wewnątrz niego.

W tym przypadku „Sekcja” dzięki

grid-column: 1 / 3;

Zajmuje całą szerokość strony – od pierwszej linii do trzeciej.

Moglibyśmy to zapisać  jako równoznaczne z:

grid-column: 1 / span 2;

Sekcja1” zajmuje pierwszą kolumnę określoną w main jako 3fr, a „Sekcja2” drugą kolumnę kontenera main o rozmiarze 1 frakcji.

Stąd Sekcja1 zajmuje 3/4 szerokości strony, a Sekcja2 1/4  – czyli 1 frakcję z 4, które określiliśmy w własności grid-template-columns: 3fr 1fr.

Dla elementu main, który staje się kontenerem poprzez display: grid, właściwość

grid-template-rows: 60px auto;

Określa tylko rzędy wewnątrz naszego nowego kontenera main, gdzie jak widać wszystko wyświetla się prawidłowo.

Responsywny szablon CSS Grid

Pisząc zoptymalizowane strony, z pewnością zależy nam na ich responsywności. W CSS Gridzie responsywność NIE jest żadnym problemem, a wręcz przeciwnie – czymś przyjemnym (np. względem babrania się w kodzie Bootstrapa 🙂 ). Spójrzmy poniżej:

@media only screen and (min-width: 600px)   {
        #main{
             grid-column: 2 / span 3;
             grid-row: 2 / 3;
        }
    }</pre><pre>

W CSS Gridzie wykorzystujemy standardowo jak w innych przypadkach „media queries”, z  tym że tutaj operujemy na naszych kontenerach i wewnętrznych elementach.

Możemy zmieniać położenie i rozmiar elementów na przykład poprzez grid-column czy też grid-row. 

css grid przykladowy responsywny layout

Aby wcześniejszy przykład wyświetlał się jak na zdjęciu powyżej dla urządzeń o szerokości maksymalnej 768px, wystarczy dla „media queries” dodać:

media screen and (max-width: 768px) {
#sekcja1{
grid-row: span 2;
}
}

Span 2, ponieważ posiadamy dwa rzędy, czyli trzy linie. Na samej górze pierwsza, środkowa – oddzielająca pierwszy rząd od drugiego oraz trzecia – na końcu strony.

CSS Grid czy Bootstrap – co jest lepsze?

Jeśli macie już doświadczenie z tworzeniem responsywnych stron internetowych powinniście kojarzyć framework jakim jest Bootstrap. Zastanówmy się więc co jest lepsze CSS Grid czy Bootstrap?

Dotychczas był to bardzo dobry wybór dla wielu ludzi. W momencie gdy CSS Grid zyskał popularność, wiele osób uznało, że już nie potrzebuje Bootstrapa. Wcześniej uważano, że posiada on wiele zalet, a wady były mało ważne dla osób korzystających z niego.

Jednak, gdy pojawił się CSS Grid, Bootstrap tak naprawdę staje się niepotrzebny, ponieważ mając kolumny, rzędy i resztę w CSS Gridzie spokojnie utworzymy z jego wykorzystaniem responsywną stronę i dodatkowe biblioteki nie będą nam do tego potrzebne.

Porównanie CSS Grid vs Boostrap

  1. kod HTML przy użyciu CSS Grida jest DUŻO PROSTSZY (brak zbędnych divów, klas),
  2. omijamy korzystanie z dokumentacji Boostrapa, wystarczy znać kilka podstawowych właściwości do pisania layoutu w CSS Gridzie,
  3. brak koduboilerplate” w CSS Gridzie (dużo zbędnego kodu dla prostej rzeczy jak to bywa w przypadku Boostrapa),
  4. CSS Grid jest bardziej elastyczny przy dokonywaniu zmian,
  5. dowolna ilość kolumn (szablon może mieć 1, 2, 5, 12 czy 24 kolumny – tyle ile potrzebujemy),
  6. już 88% przeglądarek wspiera CSS Grida (będzie ich tylko więcej),
  7. strona działa dużo szybciej (nie ładujemy żadnych dodatkowych bibliotek, skryptów, aby utworzyć szablon),
  8. CSS Grid staje się przyszłością tworzenia szablonów stron,
  9. nie musimy podpinać do strony dodatkowych bibliotek i innych elementów,
  10. możemy dokonywać zmian np. położenia elementów na telefonach z poziomu CSSa, bez dotykania HTMLa,
  11. omijamy korzystanie z całego Boostrapa, w którym zazwyczaj tylko używaliśmy gridu czy ostylowania przycisków :),
  12. najważniejsze – pisanie layoutu w CSS Gridzie jest szybsze, prostsze i dużo przyjemniejsze.

Źródła do nauki CSS Grida

Powyższy artykuł wprowadza Was solidnie do podstaw CSS Grida. Dzięki niemu jesteście już w stanie napisać prosty layout z jego użyciem. Jednak jeśli chcielibyście bardziej zagłębić się w tematykę CSS Grida oraz poznać pozostałe elementy takie jak pozycjonowanie elementów, kontenerów w pionie i poziomie, wartości minimalne i maksymalne rozmiarów kolumn/rzędów czy budowanie szablonu CSS Grida w oparciu o obszary (grid-area), powinniście sięgnąć po poniższe źródła:

 

Mam nadzieję, że dzięki powyższemu poradnikowi o CSS Gridzie w polskiej wersji wprowadziłem Was w jego podstawy 🙂 Moim zdaniem jest to bardzo dobry wybór do web developmentu. Początki mogą być trudne, ale do zrozumienia rzeczy jest niewiele, a późniejsza prostota tworzenia layoutów z użyciem CSS Grida jest super!