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, po responsywne karty, wyrównywanie i subgrid.

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)).

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.

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.

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ąć. Nowe funkcje, takie jak układ typu masonry (CSS Grid Level 3), są wciąż w trakcie standaryzacji — przed użyciem sprawdź ich obsługę.

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.