CSS Grid — praktyczny poradnik po układach siatki z przykładami

CSS Grid to moduł CSS do budowania dwuwymiarowych układów: definiujesz w kontenerze kolumny i wiersze, a potem umieszczasz elementy w wybranych komórkach lub obszarach siatki. Wystarczą dwie linijki — display: grid i grid-template-columns — żeby zamienić listę elementów w równą siatkę, a jedna funkcja repeat(auto-fit, minmax(...)) sprawia, że będzie responsywna bez media queries.

Poniżej znajdziesz najważniejsze właściwości z działającymi przykładami: od pierwszej siatki, przez układ całej strony, responsywne karty, nakładanie elementów i subgrid, po animowany akordeon, najczęstsze błędy i stan wsparcia przeglądarek w 2026 roku.

Pierwsza siatka: display grid, kolumny i odstępy

Siatkę tworzysz na kontenerze. Jego bezpośrednie dzieci automatycznie stają się elementami siatki (grid items).

<div class="siatka">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

.siatka {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 16px;
}

Efekt: trzy kolumny — pierwsza stała (200 px), dwie pozostałe dzielą resztę miejsca po równo. Elementy wypełniają komórki wiersz po wierszu, a nowe wiersze tworzą się automatycznie.

Najważniejsze pojęcia:

• ścieżka (track) — kolumna lub wiersz,
• linia — granica między ścieżkami, numerowana od 1 (także od końca: -1 to ostatnia linia),
• komórka — przecięcie wiersza i kolumny,
• obszar (area) — prostokąt złożony z kilku komórek,
• gap — odstęp między ścieżkami (osobno: row-gap, column-gap), bez marginesów na krawędziach kontenera.

Jednostka fr, repeat() i minmax()

Jednostka fr dzieli wolną przestrzeń — tę, która zostaje po odjęciu kolumn o stałej szerokości i odstępów. Zapis 2fr 1fr daje kolumny w proporcji 2:1.

Przy wielu identycznych kolumnach używaj repeat():

.siatka {
  grid-template-columns: repeat(4, 1fr);      /* 4 równe kolumny */
  grid-template-columns: 250px repeat(2, 1fr); /* stała + 2 elastyczne */
}

Funkcja minmax(min, max) ustala granice rozmiaru ścieżki:

.siatka {
  grid-template-columns: minmax(200px, 300px) 1fr;
  grid-auto-rows: minmax(120px, auto); /* wiersze min. 120 px, rosną z treścią */
}

Wskazówka: 1fr ma ukryte minimum równe auto, więc długie słowo lub szeroki obrazek potrafią rozepchnąć kolumnę i zepsuć proporcje. Jeśli kolumny mają być naprawdę równe, użyj repeat(3, minmax(0, 1fr)).

Rozmiary dopasowane do treści: auto, min-content, max-content, fit-content()

Nie każda kolumna powinna być elastyczna. Grid potrafi dopasować ścieżkę do zawartości:

• min-content — najwęższa możliwa szerokość (tekst łamany przy każdej okazji),
• max-content — szerokość treści bez łamania linii,
• auto — zachowuje się jak minmax(min-content, max-content), ale może się rozciągać, gdy zostaje wolne miejsce,
• fit-content(300px) — rośnie z treścią, ale nie więcej niż do podanej granicy.

Klasyczny przykład to formularz, w którym kolumna etykiet ma szerokość najdłuższej etykiety, a pola zajmują resztę:

.formularz {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}

Wystarczy, że w HTML etykiety i pola występują na przemian (label, input, label, input…) — każda para trafi do jednego wiersza, bez dodatkowych kontenerów.

Układ strony z grid-template-areas

Najbardziej czytelny sposób na układ całej strony to nazwane obszary. Opisujesz siatkę „obrazkiem” z nazw, a elementom przypisujesz obszar przez grid-area.

.strona {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "naglowek naglowek"
    "tresc    panel"
    "stopka   stopka";
  gap: 24px;
  min-height: 100vh;
}

.naglowek { grid-area: naglowek; }
.tresc    { grid-area: tresc; }
.panel    { grid-area: panel; }
.stopka   { grid-area: stopka; }

@media (max-width: 768px) {
  .strona {
    grid-template-columns: 1fr;
    grid-template-areas:
      "naglowek"
      "tresc"
      "panel"
      "stopka";
  }
}

Na telefonie zmieniasz tylko definicję obszarów — HTML zostaje bez zmian. Kropka w szablonie ("naglowek .") oznacza pustą komórkę. Obszary muszą być prostokątne; kształt litery L nie jest dozwolony.

Umieszczanie elementów po liniach i span

Zamiast nazw możesz wskazać linie początkową i końcową:

.wyrozniony {
  grid-column: 1 / 3;   /* od linii 1 do linii 3 = 2 kolumny */
  grid-row: 1 / span 2; /* od linii 1, przez 2 wiersze */
}

.pelna-szerokosc {
  grid-column: 1 / -1;  /* od pierwszej do ostatniej linii */
}

span N oznacza „rozciągnij na N ścieżek” i jest wygodne, gdy nie chcesz liczyć linii. Zapis 1 / -1 przydaje się do banerów i nagłówków sekcji, które mają zajmować całą szerokość niezależnie od liczby kolumn.

Elementy bez jawnej pozycji Grid układa automatycznie. Jeśli po rozciągniętych elementach zostają dziury, grid-auto-flow: dense każe przeglądarce wypełnić je mniejszymi elementami — pamiętaj jednak, że zmienia to kolejność wizualną względem kolejności w HTML, co utrudnia nawigację klawiaturą i czytnikom ekranu.

Siatka jawna i niejawna

Ścieżki opisane w grid-template-columns i grid-template-rows to siatka jawna. Gdy elementów jest więcej, niż przewidziałeś, albo umieścisz element poza zdefiniowanymi liniami, przeglądarka dobuduje ścieżki niejawne. Ich rozmiar ustalasz właściwościami grid-auto-rows i grid-auto-columns:

.lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto); /* każdy dobudowany wiersz */
}

.os-czasu {
  display: grid;
  grid-auto-flow: column;   /* nowe elementy dokładane jako kolumny */
  grid-auto-columns: 220px;
  overflow-x: auto;         /* poziomo przewijana lista kart */
}

Domyślnie grid-auto-flow ma wartość row, więc siatka rośnie w dół. Zmiana na column daje poziomy pasek kart, który przewija się na boki — przydatne w karuzelach bez JavaScriptu.

Nakładanie elementów na siebie

W Gridzie kilka elementów może zajmować tę samą komórkę. To najprostszy sposób na baner z tekstem na zdjęciu, bez position: absolute:

.baner {
  display: grid;
}

.baner > * {
  grid-area: 1 / 1;   /* wszystkie dzieci w tej samej komórce */
}

.baner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.baner .podpis {
  align-self: end;    /* tekst przyklejony do dolnej krawędzi */
  padding: 24px;
  z-index: 1;
}

Wysokość banera wyznacza wyższy z elementów, więc długi tekst nie wyjdzie poza obrazek, jak bywa przy pozycjonowaniu absolutnym.

Responsywna siatka kart bez media queries

To najczęściej używany wzorzec CSS Grid — galeria, lista produktów, kafelki wpisów:

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
}

Przeglądarka tworzy tyle kolumn o szerokości co najmniej 250 px, ile zmieści się w kontenerze, a pozostałe miejsce dzieli równo. Na szerokim ekranie zobaczysz cztery–pięć kolumn, na tablecie dwie–trzy, na telefonie jedną. min(250px, 100%) chroni przed poziomym przewijaniem na bardzo wąskich ekranach.

Wyrównywanie elementów w siatce

Grid korzysta z tych samych właściwości wyrównania co Flexbox, ale w dwóch osiach:

Klasyczne wyśrodkowanie elementu w pionie i poziomie w CSS Grid to dwie linijki:

.srodek {
  display: grid;
  place-items: center;
}

Subgrid: wyrównanie zagnieżdżonych elementów

Typowy problem: karty w siatce mają tytuły różnej długości, przez co przyciski „Czytaj dalej” lądują na różnych wysokościach. Subgrid pozwala elementowi zagnieżdżonemu przejąć ścieżki siatki rodzica:

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.karta {
  display: grid;
  grid-row: span 3;               /* obrazek, tytuł, przycisk */
  grid-template-rows: subgrid;    /* wiersze wspólne dla kart w jednym rzędzie */
  row-gap: 8px;                   /* nadpisuje odstęp odziedziczony z rodzica */
}

Teraz tytuły, opisy i przyciski w jednym rzędzie kart są wyrównane do tych samych linii. Subgrid jest obsługiwany przez Firefoksa, Safari, Chrome i Edge — od 2023 roku we wszystkich głównych przeglądarkach.

Animowany akordeon z grid-template-rows

Animowanie wysokości od zera do auto długo wymagało JavaScriptu. Grid rozwiązuje to jedną sztuczką: przeglądarki potrafią płynnie animować grid-template-rows między 0fr a 1fr (Chrome i Edge od wersji 107, Firefox od 66, Safari od 16).

.akordeon-tresc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.akordeon.otwarty .akordeon-tresc {
  grid-template-rows: 1fr;
}

.akordeon-tresc > div {
  overflow: hidden;   /* bez tego treść wystaje przy 0fr */
}

Treść może mieć dowolną wysokość, a przeglądarka sama wylicza animację. Przełączanie klasy otwarty zostaje jedynym zadaniem skryptu — albo możesz oprzeć się na natywnym elemencie details.

Najczęstsze błędy przy pracy z CSS Grid

Większość problemów z siatką wynika z kilku powtarzalnych pomyłek:

1. display: grid na niewłaściwym elemencie. Siatkę tworzą tylko bezpośrednie dzieci kontenera. Jeśli karty są opakowane w dodatkowy div lub a, to on staje się elementem siatki, a nie karta. Usuń zbędny wrapper albo użyj na nim display: contents.
2. Poziome przewijanie na telefonie. minmax(300px, 1fr) na ekranie węższym niż 300 px plus odstępy wypycha stronę poza ekran. Pomaga minmax(min(300px, 100%), 1fr).
3. Rozepchnięta kolumna 1fr. Długi adres URL, tabela lub blok kodu poszerzają ścieżkę ponad przydział. Rozwiązanie to minmax(0, 1fr) oraz min-width: 0 na elemencie siatki.
4. Rozciągnięte obrazki. Domyślne align-items: stretch rozciąga elementy na wysokość wiersza. Ustaw obrazkom align-self: start albo object-fit: cover z określoną wysokością.
5. Marginesy zamiast gap. Marginesy elementów sumują się z odstępami i psują wyrównanie przy krawędziach. Odstępy między ścieżkami ustawiaj wyłącznie przez gap.
6. Kolejność wizualna niezgodna z HTML. order, grid-auto-flow: dense i ręczne pozycjonowanie mogą sprawić, że klawiatura i czytnik ekranu przechodzą po elementach w innej kolejności, niż widzi je użytkownik. Kolejność w HTML powinna odpowiadać logicznej kolejności treści.

CSS Grid czy Flexbox — kiedy co wybrać

To nie są konkurencyjne technologie i w jednym projekcie używa się obu.

Prosta zasada: jeśli myślisz o wierszach i kolumnach jednocześnie — Grid. Jeśli o jednym ciągu elementów, który ma się rozłożyć w linii — Flexbox.

Wsparcie przeglądarek i debugowanie

CSS Grid jest obsługiwany bez prefiksów przez wszystkie współczesne przeglądarki od 2017 roku. Jedyną przeglądarką z problemami był Internet Explorer 11 (stara, niekompatybilna składnia -ms-grid), który nie jest już wspierany przez Microsoft, więc w nowych projektach możesz go pominąć. Kolejną nowością jest natywny układ typu masonry („cegiełki” jak na Pintereście). Grupa robocza CSS ustaliła dla niego składnię display: grid-lanes, opartą na znanych właściwościach Grida, np. grid-template-columns. Jako pierwsze obsługuje ją bez flag Safari 26.4 (marzec 2026); w Chrome, Edge i Firefoksie w momencie aktualizacji tego tekstu funkcja wymagała włączenia eksperymentalnej flagi. Stosuj ją więc jako ulepszenie progresywne: zwykła siatka dla wszystkich, a układ masonry w bloku @supports (display: grid-lanes).

Do debugowania używaj narzędzi deweloperskich:

1. Otwórz DevTools (F12) w Chrome, Edge lub Firefoksie.
2. W panelu Elements (Elementy) kliknij plakietkę grid obok kontenera siatki.
3. Przeglądarka nałoży na stronę linie siatki z numerami i nazwami obszarów. W zakładce Layout (Układ) możesz włączyć wyświetlanie numerów linii i rozmiarów ścieżek.

Siatka to tylko narzędzie — o tym, czy układ jest wygodny, decydują zasady projektowania. Przeczytaj o nich w artykule o prawach UX i zasadach dobrego projektowania. Jeśli budujesz stronę na WordPressie, bloki „Siatka” (Grid) i „Kolumny” w edytorze opisuje poradnik Gutenberga, a stabilność układu podczas ładowania (wskaźnik CLS) zmierzysz narzędziem opisanym w tekście o WebPageTest. Także wizualne kreatory, opisane w porównaniu Webflow i WordPressa, generują pod spodem ten sam CSS Grid — znajomość właściwości z tego poradnika ułatwia pracę również w nich.