System gridów w Bootstrap 5

1. Czym jest system gridów?

System gridów (grid system) w Bootstrap to potężny mechanizm układania elementów na stronie w formie siatki. Jest oparty na Flexbox i pozwala tworzyć responsywne, elastyczne układy bez pisania CSS od zera.

Podstawowe zasady:

Grid składa się z 12 kolumn
Elementy umieszczamy w wierszach (.row)
Wiersze znajdują się w kontenerach (.container lub .container-fluid)
Kolumny automatycznie się dostosowują do rozmiaru ekranu

2. Podstawowa struktura

Każdy grid wymaga trzech elementów:

3. Typy kontenerów

3.1. Container (responsywny, stała szerokość)

Breakpoint	Maksymalna szerokość
< 576px	100%
≥ 576px	540px
≥ 768px	720px
≥ 992px	960px
≥ 1200px	1140px
≥ 1400px	1320px

3.2. Container-fluid (pełna szerokość)

3.3. Kontenery z breakpointami

4. Kolumny i wiersze

4.1. Auto-layout (równe kolumny)

Kolumny bez określonej szerokości dzielą się równo:

Każda kolumna zajmie 33.33% szerokości wiersza.

4.2. Określona szerokość (system 12 kolumn)

Możesz precyzyjnie kontrolować szerokość:

Przykład: 3 kolumny po 4 (razem 12):

4.3. Mieszane szerokości

5. Responsywne kolumny

Możesz określić różne szerokości dla różnych rozmiarów ekranu:

Breakpointy:

Prefix	Rozmiar ekranu
(brak)	< 576px (extra small)
`sm`	≥ 576px (small)
`md`	≥ 768px (medium)
`lg`	≥ 992px (large)
`xl`	≥ 1200px (extra large)
`xxl`	≥ 1400px (extra extra large)

Przykład responsywnych kolumn:

Wyjaśnienie: * col-12 – na ekranach < 576px każda kolumna zajmuje całą szerokość * col-md-6 – na ekranach ≥ 768px każda kolumna zajmuje połowę (2 kolumny obok siebie) * col-lg-3 – na ekranach ≥ 992px każda kolumna zajmuje 25% (4 kolumny obok siebie)

6. Wyrównywanie kolumn

6.1. Wyrównanie pionowe (vertical alignment)

Użyj klas .align-items-* na wierszu:

Możesz też wyrównać pojedyncze kolumny:

6.2. Wyrównanie poziome (horizontal alignment)

Użyj klas .justify-content-*:

7. Offsety (przesunięcia)

Możesz przesunąć kolumnę w prawo używając .offset-*:

Responsywne offsety:

8. Zagnieżdżone gridy

Możesz umieścić wiersz wewnątrz kolumny:

9. Guttery (odstępy między kolumnami)

9.1. Domyślne guttery

Bootstrap automatycznie dodaje odstępy między kolumnami. Możesz je kontrolować:

9.2. Guttery tylko poziome lub pionowe

10. Kolejność kolumn

Możesz zmienić kolejność wyświetlania kolumn:

Responsywna kolejność:

11. Praktyczne przykłady

11.1. Layout 2-kolumnowy (sidebar + content)

11.2. Layout 3-kolumnowy

11.3. Galeria zdjęć responsywna

Wyjaśnienie: * Na małych ekranach: 2 kolumny (col-6 = 50%) * Na średnich: 3 kolumny (col-md-4 = 33.33%) * Na dużych: 4 kolumny (col-lg-3 = 25%)

12. Częste błędy

❌ Błąd: Brak wiersza

✅ Poprawnie:

❌ Błąd: Więcej niż 12 kolumn w wierszu

✅ Poprawnie:

13. Podsumowanie

System gridów w Bootstrap 5 to fundament responsywnego layoutu. Dzięki Flexbox jest elastyczny i intuicyjny.

Kluczowe informacje:

12 kolumn – podstawa systemu
Kontenery – .container lub .container-fluid
Wiersze – .row
Kolumny – .col, .col-6, .col-md-4, itd.
Breakpointy – sm, md, lg, xl, xxl
Wyrównywanie – align-items-*, justify-content-*
Guttery – g-*, gx-*, gy-*

Co dalej:

Komponenty Bootstrap (przyciski, karty, nawigacja)
Utility classes do szybkiego stylowania
Flexbox utilities