Siatka / Grid

16 026 3

Responsywna siatka Bootstrapa służy do budowania szkieletu strony i jest moim zdaniem jego najważniejszym elementem. Dzięki gridowi możemy zbudować sobie cały układ strony i zdefiniować jak ma się zachowywać na poszczególnych rozdzielczościach. W Bootstrap 4 dodatkowo mamy do dyspozycji Flexbox co otwiera przed nami nowe możliwości odnośnie chociażby łatwego wyśrodkowania w pionie;)

Aby wszystko działało jak należy, musimy najpierw stworzyć sobie kontener czyli diva z klasą .container, który spina nam w całość wybrany element layoutu. W jego wnętrzu tworzymy sobie kolejne rzędy czyli divy z klasą .row. W każdym rzędzie możemy umieścić do 12 kolumn czyli divów z klasą .col-*-* lub .col-* lub .col, w których umieszczamy elementy treści naszej strony.

Prócz tego, że mamy do dyspozycji 12 kolumn, mamy również możliwość wyświetlania ich w różny sposób w zależności od rozdzielczości ekranu. Przykładowo stworzenie dwóch kolumn o szerokości 6 za pomocą klasy .col-md-6 wyświetli je obok siebie powyżej szerokości ekranu 768px natomiast na niższej będą się one układać pod sobą. Natomiast stworzenie dwóch kolumn za pomocą klasy .col-6 wyświetli nam dwie kolumny, obok siebie zarówno, na smartfonie jak i monitorze z rozdzielczością Full HD.

Jest to bardzo przydatne bo przykładowo trzy zdjęcia obok siebie na laptopie były by już bardzo małe na tablecie czy smartfonie, więc lepiej żeby wtedy układały się pod sobą na całej szerokości ekranu. Tak samo z tekstami, dwie kolumny tekstu na komputerze podczas wyświetlenia na smartfonie były by bardzo wąskie i długie a zatem trudne do przeczytania. Odpowiedni dobór rodzajów kolumn pozwala nam na budowanie czytelnego layoutu w zależności od rozdzielczości urządzenia na którym będziemy przeglądać stronę.

Extra small (smartfony)
<576px
Small (smartfony w pozycji horyzontalnej)
≥576px
Medium (tablety)
≥768px
Large (tablety w pozycji horyzontalnej oraz laptopy)
≥992px
Extra large (monitory z wysokimi rozdzielczościami)
≥1200px
Zachowanie siatkiKolumny zawsze obok siebieKolumny obok siebie powyżej rozdzielczości, pod sobą poniżej.
Szerokość konteneraNone (auto)540px720px960px1140px
Nazwa klasy.col-.col-sm-.col-md-.col-lg-.col-xl-
Ilość kolumn12
Odstępy30px (15px z każdej strony kolumny)
Możliwość zagnieżdzaniaTak
Offset (przesuwanie)Tak
Zmiana kolejnościTak

Jak widzicie w powyższej tabeli:

  • Klasa .col-* spowoduje wyświetlanie się kolumn zawsze obok siebie, niezależnie od rozdzielczości
  • Klasa .col-sm-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 576px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-md-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 768px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-lg-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 992px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-xl-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 1200px, poniżej będą się wyświetlały pod sobą.

Automatyczna szerokość kolumn

Przykład – równa szerokość

Przykład

1 z 2
2 z 2

1 z 3
2 z 3
3 z 3

Kod

Tak jak pisałem wcześniej, Bootstrap 4 opiera się o Flexbox. Jedną z jego funkcjonalności jest możliwość automatycznego tworzenia kolumn o równych szerokościach. Dlatego też w powyższym przypadku nie wykorzystujemy dwóch kolumn po „6” czy trzech kolumn po „4” a po prostu umieszczamy wewnątrz kontenera i rzędu odpowiednią ilość divów z klasą .col i Bootstrap sam utworzy odpowiedniej szerokości kolumny. Pamiętajcie, że bez dopisania kolejnych klas ( o których za chwilę ) kolumny te nie będą się układały pod sobą na mniejszych rozdzielczościach.

Przykład – Definiowanie szerokości jednej kolumny

Przykład

1 z 3
2 z 3 (szersza – col-6)
3 z 3

1 z 3
2 z 3 (szersza – col-8)
3 z 3

Kod

Kolejnym dobrodziejstwem Flexboxa jest możliwość „opływania” jednej kolumny przez pozostałe. Możemy dzięki temu na przykład zbudować layout w układzie „1/4 1/2 1/4” czyli na przykład mieć na stronie dwa równe sidebary a część główna zawsze będzie szerokości połowy ekranu. Postępujemy tu podobnie jak w poprzednim przykładzie czyli: Najpierw standardowo kontener .container, następnie rząd .row a na koniec div z klasą .col-* gdzie * odpowiada „rozmiarowi” kolumny w skali 1-12 czyli jak w przypadku standardowych Bootstrapowych kolumn.

Przykład – Szerokość kolumny zależna od treści

Przykład

1 z 3
Szerokość zależy od treści
3 z 3

1 z 3
Krótka treść
3 z 3

Kod

W powyższym przykładzie ma zastosowanie dopasowanie szerokości do treści w niej zawartej. Im dłuższy tekst, tym kolumna będzie szersza, jednocześnie zmniejszając pozostałe. Aby uzyskać taki efekt musimy stworzyć kolumnę z klasą .col-*-auto gdzie pod * możemy podstawić znane nam breakpointy sm, md, lg, xl. W zależności od tego jaki breakpoint zastosujemy, nasza kolumna będzie miała, poniżej niego, 100% szerokości, identycznie jak przy zwykłych kolumnach.

P.S 1 Pewnie zauważyliście w przykładzie klasę .justify-content-md-center – służy ona do wycentrowania kolumn w poziomie gdy nie wypełniają one całego rzędu. Oczywiście md w owej klasie jest nazwą breakpointu i możemy tam użyć innego.

P.S 2 Drugim, nie pojawiającym się wcześniej zapisem jest połączenie klas .col .col-lg-2. Wspomniałem o tym wcześniej, ale jak się pewnie domyślacie, owa kolumna dla rozdzielczości ≥992px będzie miała szerokość „2” a poniżej będzie kolumną elastyczną, wypełniającą całą dostępną dla niej przestrzeń. Tutaj znów mamy zapis breakpointa lg, który możemy zmienić na dowolnie nam pasujący.

Przykład – Wiele równych rzędów

Przykład

col
col
col
col

Kod

Gdy będziemy potrzebowali kilku równych rzędów kolumn, znajdujących się pod sobą i nie oddzielonych marginesami czy wypełnieniem ( miało by to miejsce gdybyśmy każdy rząd umieszczali w nowym divie z klasą .row ) wystarczy, że w miejscu w którym chcemy przenieść kolejne kolumny niżej wstawimy pusty div z klasą .w-100.

Responsywność

Podstawowy przykład

Przykład

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-8
col-md-4
col-md-4
col-md-4
col-md-4
col-md-6
col-md-6

Kod

W powyższym przykładzie mamy 12 kolumn o szerokości 1, dwie kolumny o szerokościach 8 i 4, trzy kolumny o szerokości 4 oraz dwie kolumny o szerokości 6. Jak widzicie, zawsze suma wynosi 12. Z racji tego, że kolumny mają klasę .col-md-* to poukładają się pod sobą poniżej 720px szerokości ekranu. Jeśli oglądacie tę stronę na tablecie czy smartfonie to kolumny na pewno są pod sobą a nie obok. Jeśli korzystacie z komputera to zmiejszcie sobie okno przeglądarki lub skorzystajcie z opcji „symulatora responsywności” w Google Chrome ( Najpierw F12 a później CTRL + SHIFT + M ) a zauważycie moment zmiany układu kolumn.

Przykład – Smartfon i komputer

Przykład

.col-12 .col-md-8
.col-6 .col-md-4

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

.col-6
.col-6

Kod

W powyższym przykładzie mieszamy ze sobą dwie klasy .col-* oraz .col-md-*. Dzięki takiemu zabiegowi zmieniamy sposób wyświetlania kolumn w zależności od rozdzielczości. W pierwszy przykładzie na komputerze mamy jedną kolumnę o szerokości 8 oraz drugą o szerokości 4. Natomiast na smartfonie wyświetli się nam jedna o szerokości 12 a druga o szerokości 6. Drugi przykład na komputerze pokazuje trzy kolumny o szerokości 4 natomiast na smartfonie mamy dwie kolumny o szerokości 6 obok siebie a pod nimi jeszcze jedną o tej samej szerokości. Trzeci przykład pokazuje zawsze dwie kolumny o szerokości 6 obok siebie niezależnie od rozdzielczości.

Przykład – Smartfon, tablet i komputer

Przykład

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4

Kod

Kolejny z przykładów łączy kolumny dla smartfonów .col-*, kolumny dla tabletów .col-sm-* i kolumny dla komputerów .col-md-*. Pozmieniajcie sobie szerokość przeglądarki lub otwórzcie tę stronę na różnych urządzeniach abyście sami zobaczyli jak się zachowuje powyższy kod i zrozumieli jego działanie.

Z racji tego, że mam ograniczoną szerokość treści, to nie jestem w stanie pokazać niektórych przykładów z dużymi rozdzielczościami. Ale myślę, że nazewnictwo klas kolumn oraz zachowanie tych dla mniejszych rozdzielczości .col-md-* .col-sm-* .col-*, które możecie sprawdzić zmieniając rozmiar przeglądarki w zupełności wystarczy aby zrozumieć ich działanie. Te większe .col-lg-* .col-xl-* działają identycznie;)

Przykład – Równe szerokości dla różnych rozdzielczości

Przykład

col
col
col
col-sm
col-sm
col-sm
col-xl
col-xl
col-xl

Kod

No i tutaj po raz ostatni wracamy do kolumn o równych szerokościach. Pamiętamy, że kolumny z klasą .col zawsze, niezależnie od rozdzielczości, utworzą daną ilość kolumn (jeśli w rzędzie umieścimy 3 divy z klasą .col to otrzymamy 3 równe kolumny ). Zachowanie takie nie zawsze jest nam przydatne, bo po co nam 3 bardzo wąskie kolumny tekstu na smartfonie? Dlatego możemy dopisać do klasy .col interesujący nas breakpoint. W tej sposób kolumny z klasą .col-sm będą miały równą szerokość dla rozdzielczości <576px a poniżej ułożą się pod sobą. Analogicznie kolumny z klasą .col-xl poukładają się jedna pod drugą dla rozdzielczości poniżej 992px. Prawda, że teraz używanie tych kolumn ma sens?;)

Wyrównywanie rzędów i kolumn

Przykład – Wyrównywanie rzędu w pionie

Przykład

1/3 góra
1/3 góra
1/3 góra

1/3 środek
1/3 środek
1/3 środek

1/3 dół
1/3 dół
1/3 dół

Kod

Kolejne dobrodziejstwo Flexboxa czyli wyrównywanie w pionie. Wcześniej oczywiście też było to możliwe ale czasami trzeba było się nakombinować aby wszystko działało jak należy dla różnych rozdzielczości. Teraz Bootstrap umożliwia to jedną klasą. A wygląda to następująco:

  • Aby wyrównać rząd do „góry” rzędu stosujemy dla niego klasę .align-items-start
  • Aby wyrównać rząd do „środka” rzędu stosujemy dla niego klasę .align-items-center
  • Aby wyrównać rząd do „dołu” rzędu stosujemy dla niego klasę .align-items-end

Przykład – Wyrównywanie kolumny w pionie

Przykład

1/3 góra
1/3 środek
1/3 dół

Kod

Ten przykład jest podobny do powyższego, również traktuje o wyrównywaniu w pionie. Ale w nim nie układamy całego rzędu a jedynie pojedyncze kolumny, które się w nim znajdują. Dlatego tym razem dodajemy klasę do kolumny a nie do rzędu. I wygląda to następująco:

  • Aby wyrównać kolumnę do „góry” rzędu stosujemy dla niej klasę .align-self-start
  • Aby wyrównać kolumnę do „środka” rzędu stosujemy dla niej klasę .align-self-center
  • Aby wyrównać kolumnę do „dołu” rzędu stosujemy dla niej klasę .align-self-end

Przykład – Wyrównywanie w poziomie

Przykład

1/2
1/2
1/2
1/2
1/2
1/2
1/2
1/2
1/3
1/3
1/3

Kod

Wyrównywanie w poziomie, podczas gdy z wyrównywaniem tekstu nie ma żadnego problemu, tak z elementami blokowymi nie zawsze jest tak łatwo. Oczywiście na to również istnieją rozwiązania. Ale to po możemy korzystać z Flexboxa, aby nie musieć kombinować:) Tak więc Bootstrap 4 posiada klasy które umożliwiają łatwe układanie zawartości rzędu, czyli kolumn. A wygląda to następująco:

  • Aby wyrównać zawartość rzędu do lewej strony kontenera stosujemy klasę .justify-content-start
  • Aby wyrównać zawartość rzędu do środka strony kontenera stosujemy klasę .justify-content-center
  • Aby wyrównać zawartość rzędu do prawej strony kontenera stosujemy klasę .justify-content-end
  • Aby wyrównać zawartość rzędu tak by każda kolumna miała po lewej i prawej równe odstępy stosujemy klasę .justify-content-around
  • Aby wyrównać zawartość rzędu tak by rozłożyć kolumny w równych odstępach od siebie stosujemy klasę justify-content-between

Przykład – Wyrównywanie w pionie i w poziomie

Przykład

środek

Kod

No to skoro możemy już wyrównywać w pionie i w poziomie to dlaczego by nie zastosować tych dwóch funkcjonalności jednocześnie. W takim przypadku dla rzędu nadajemy klasę .justify-content-around a dla kolumny .align-self-center i gotowe:)

Przykład – Usunięcie paddingu w kolumnach

Przykład

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Kod

Kolumny w Bootstrapie posiadają padding (wypełnienie) by, podczas stosowania kilku kolumn, oddzielić od siebie ich zawartość. Może się zdarzyć tak, że będzie nam to niepotrzebne, bo przykładowo budujemy galerię zdjęć i chcemy by były one zaraz obok siebie. Wystarczy wtedy rzędowi, który zawiera owe kolumny, .row dodać klasę .no-gutters

Przykład – Zawijanie kolumn

Przykład

.col-9
.col-4
( 9+4=13, skoro przekroczyliśmy 12 to kolumna przechodzi niżej )
.col-6
Kolejna kolumna ustawia się obok

Kod

Jak już wiecie, Bootstrap pozwala na 12 kolumn w jednym rzędzie. W powyższym przykładzie chcieliśmy ustawić obok siebie jedną kolumnę o szerokości 9 i drugą o szerokości 4. Z racji tego, że 9+4=13 to przekroczyliśmy dozwolony zakres. W takim przypadku kolumna, która się „nie mieści” zostaje przeniesiona poniżej. Dodatkowo jeśli kolejna kolumna po dodaniu nie przekracza 12 to wyświetli się nam obok a nie znów poniżej. Ciężko to ubrać w słowa, ale myślę, że powyższy przykład dokładnie pokazuje o co chodzi:)

Przykład – Resetowanie ustawienia kolumn

Przykład

.col-6 .col-sm-3
.col-6 .col-sm-3

.col-6 .col-sm-3
.col-6 .col-sm-3

Kod

Autorzy Bootstrapa piszą, że podczas gdy stosujemy kilka klas responsywności kolumn i dodatkowo kolumny mają różną wysokość czyli różną zawartość to może się zdarzyć, że nie poukładają się prawidłowo. Należy wtedy użyć klasy .clearfix w połączeniu z klasą pokazującą ten div tylko dla wybranej rozdzielczości.

Kolejność kolumn

Przykład – Przestawianie kolejności kolumn

Przykład

Pierwsza, bez kolejności
Druga, ale ostatnia
Trzecia, ale pierwsza

Kod

I znów będzie o Flexboxie;) Ale to dlatego, że zawdzięczamy mu kolejną funkcjonalność Bootstrapa. Chodzi o ustawianie kolejności kolumn. Przykładowo. Mamy sidebar po lewej stronie naszej witryny, więc jest on w pierwszej kolumnie. Gdy otworzymy stronę na telefonie to będzie on pierwszym elementem na ekranie, a jednak woleli byśmy by pierwsza była treść a ów sidebar był dopiero niżej. Tutaj z pomocą przychodzi nam klasa .order-* gdzie pod * możemy stosować numerację 1...12 bo tyle możemy mieć maksymalnie kolumn w rzędzie. Ale przejdź my do konkretów. Kolumna, która nie ma klasy .order-* będzie zawsze pierwsza. Następnie korzystamy z przydzielonej numeracji. Jeśli kolumna jest druga w kodzie ale chcemy by wyświetliła się jako ostatnia to dajemy jej najwyższy numer, w tym przypadku 12. Jeśli trzecia kolumna ma być druga ( bo, jak w przykładzie, pierwsza z nich nie ma klasy .order-*, więc jakby nie liczy się w tej układance ) nadamy jej klasę .order-1. W przypadku większej ilości kolumn po prostu ustawiamy ich kolejność za pomocą kolejnych numerów w .order-*.

P.S Klasę .order-* możemy łączyć z breakpointami .order-sm-* .order-md-* itd. Więc jak się już zapewne domyślacie kolejnością kolumn można sterować dowolnie w zależności od rozdzielczości ekranu. Np pierwsza kolumna na mobile może być ostatnią na desktopie i być w środku na tablecie.

Przykład – Przestawianie kolumn

Przykład

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

Kod

Co prawda za przestawianie kolumn w Bootstapie 4 zapewnia Flexbox, więc wyżej opisywane funkcje mogą okazać się nieprzydatne. Ale przykład zawiera coś innego, co na pewno może się przydać, może nie koniecznie do ustawiania kolumn. A chodzi o automatyczne marginesy. Poniżej opis tych klas:

  • .ml-auto – dodaje margines po lewej stronie (CSS .margin-left="auto;" czyli „przesuwa” element maksymalnie w prawo.
  • .mr-auto – dodaje margines po prawej stronie (CSS .margin-right="auto;" czyli „przesuwa” element maksymalnie w lewo.

Powyższe klasy można łączyć z breakpointami na zasadzie .ml-breakpoint-auto i zastosować można oczywiście breakpointy sm, md, lg, xl wtedy margines będzie się dodawał tylko przy danej rozdzielczości.

Zagnieżdżanie kolumn

Przykład

Poziom 1: .col-sm-9

Poziom 2: .col-8 .col-sm-6
Poziom 2: .col-4 .col-sm-6

Kod

Gdy budujemy bardziej skomplikowany layout może zajść potrzeba zagnieżdżania kolumn. Na przykład mamy stronę z paskiem bocznym. Część z treścią ma szerokość 9 (.col-sm-9) a sidebar szerokość 3 (.col-sm-3). Ale wewnątrz treści chcemy umieścić dwie kolumny a poniżej jeszcze trzy kolumny ze zdjęciami. Takie zagnieżdżanie możemy wykonać bez problemu. Wewnątrz naszego diva o szerokości 9 tworzymy nowy rząd .row a w nim znów mamy do dyspozycji nowe 12 kolumn. Zatem nasze 2 kolumny będą miały klasę .col-sm-6 a nasze zdjęcia umieścimy w divach z klasą .col-sm-4. Pamiętajcie zatem, że zagnieżdżenie robimy poprzez utworzenie diva z klasą .row i wewnątrz niego znów mamy do dyspozycji 12 kolumn.

Uff… I to by było na tyle z podstaw siatki Bootstrapa. Mam nadzieję, że wszystko wyjaśniłem jak należy. W razie pytań zapraszam do komentowania:)

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (57 głosów, średnia: 4,88 na 5)
Loading...

3 komentarzy w “Siatka / Grid

M

Jasne i czytelne. Dobrze się czyta – szczególnie o 5.34, gdy dzieci jeszcze śpią…

mario

Kurde, od 20lat skrobie sajty posilkujac sie php ale nie zabralem sie jeszcze za responsywne do tego czasu. Fajnie opisane choc mam kilka dylematow chocby z dziedziczeniem. Wogole cos takoego istnieje jak dziedz. klas divow? Wszystko niby jasne dla prostej strony ale jak zagniezdze kilka div i chcialbym zeby to bylo responsywne. Jesli glowne bedzie responsywne to rozumiem ale co jesli w kolejnym div zagniezdze kilka row bez typowych klas?

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*