Dokumentacja CSS z przykładami: CSS Grid

Q: Co oznacza 1fr w CSS grid?

fr to ułamek wolnej przestrzeni w kontenerze grid. grid-template-columns: 1fr 1fr 1fr daje trzy równe kolumny, a 1fr 2fr sprawia, że druga kolumna jest dwa razy szersza od pierwszej. Najpierw odejmowane są stałe rozmiary i odstępy; kolumny fr dzielą się tym, co zostało.

Q: Czym różni się auto-fill od auto-fit?

Oba tworzą tyle kolumn, ile się zmieści. auto-fill zachowuje puste kolumny, więc kilka elementów pozostaje wąskich i na końcu wiersza zostaje puste miejsce. auto-fit zwija puste kolumny, więc elementy rozciągają się na cały wiersz. Gdy elementów wystarczy, żeby wypełnić wiersz, oba wyglądają tak samo.

Q: Jak sprawić, żeby element grid zajmował dwie kolumny?

Użyj na elemencie grid-column: span 2 albo podaj linię początkową i końcową: grid-column: 1 / 3 obejmuje kolumny 1 i 2. grid-column: 1 / -1 zajmuje całą szerokość, bo -1 to ostatnia linia.

Q: Czy grid-gap to to samo co gap?

Tak. grid-gap, grid-row-gap i grid-column-gap to stare nazwy. Przeglądarki nadal akceptują je jako aliasy, ale pisz gap, row-gap i column-gap, które działają też we flexboxie.

Siatka w trzech linijkach

Ustaw display: grid na kontenerze i wypisz jego kolumny w grid-template-columns. Dzieci wypełniają komórki po kolei, w języku polskim od lewej do prawej, a nowy wiersz zaczyna się, gdy kolumny są pełne:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Siedem elementów, trzy kolumny: dwa pełne wiersze i trzeci wiersz z elementem 7 w pierwszej kolumnie. Każda kolumna ma tę samą szerokość, a każdy element w wierszu tę samą wysokość, więc krawędzie wyrównują się w obu kierunkach. To właśnie grid dodaje w porównaniu z flexboxem.

Edytor online siatki

Wpisz dowolną wartość grid-template-columns albo kliknij gotowe ustawienie. Odczyt pokazuje szerokości kolumn obliczone przez przeglądarkę (z getComputedStyle) i liczbę wierszy potrzebnych dla elementów:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Na co zwrócić uwagę: 1fr 2fr sprawia, że druga kolumna jest dokładnie dwa razy szersza od pierwszej. 200px 1fr zachowuje 200px, a resztę oddaje drugiej kolumnie. auto 1fr auto dopasowuje zewnętrzne kolumny do ich treści. repeat(4, 100px) zostawia na końcu puste miejsce, bo nic nie jest elastyczne. Nieprawidłowa wartość, na przykład 1fr 2, jest ignorowana, a siatka zachowuje ostatnią poprawną wartość.

Jednostka fr

fr oznacza "jeden udział w wolnej przestrzeni". Przeglądarka najpierw odejmuje stałe kolumny (px, rem, %, treść auto) i odstępy, a potem dzieli resztę między kolumny fr według ich liczb.

`grid-template-columns` w kontenerze 600px, bez odstępu	Szerokości kolumn
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr to nie to samo co %: procenty razem z odstępami mogą dać więcej niż 100% i wylać się poza kontener, a kolumny fr zawsze dzielą tylko to, co zostaje po odstępach.

repeat(), minmax() i responsywna siatka bez media queries

repeat(4, 1fr) to 1fr 1fr 1fr 1fr. minmax(120px, 1fr) to kolumna, która nigdy nie jest węższa niż 120px i rośnie, żeby zająć swój udział. Połącz je z auto-fill lub auto-fit zamiast liczby, a siatka utworzy tyle kolumn, ile się zmieści:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Ta jedna deklaracja daje tyle kolumn o szerokości co najmniej 180px, ile zmieści kontener: kilka na szerokim ekranie, jedną na telefonie, bez żadnego media query. Różnicę między auto-fill a auto-fit widać, gdy elementów jest mniej niż kolumn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Kontener mieści pięć kolumn po 100px. auto-fill zachowuje wszystkie pięć, więc A, B i C mają po 112px, a dwie kolumny zostają puste. auto-fit zwija puste kolumny, więc trzy elementy rozciągają się do około 187px każdy.

Umieszczanie elementów: grid-column i grid-row

Linie siatki są numerowane od 1 przy krawędzi początkowej. grid-column: 1 / 3 oznacza "od linii 1 do linii 3", czyli dwie kolumny. span 2 oznacza "dwie kolumny od miejsca, w którym element wyląduje", a -1 to ostatnia linia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Ciemny element wypełnia cały pierwszy wiersz. Niebieski zajmuje blok 2 na 2, bursztynowy dwa wiersze. Elementy a i b same wypełniają pozostałe komórki: grid umieszcza każdy element, jaki może, w następnej wolnej komórce. grid-auto-rows: 60px ustawia wysokość wierszy, których nie zadeklarowano w grid-template-rows.

grid-template-areas: nazwij części układu

W układzie strony nazwij obszary i narysuj je jako tekst. Każdy ciąg znaków to wiersz, każde słowo to komórka, a element dołącza do obszaru przez grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Nagłówek i stopka zajmują obie kolumny, bo ich nazwy wypełniają obie komórki swoich wierszy. Środkowy wiersz ma 1fr, więc zajmuje całą wysokość, jaka zostaje z 280px. Żeby na telefonie ułożyć wszystko jedno pod drugim, media query musi tylko narysować obszary na nowo jako jedną kolumnę: grid-template-areas: "header" "side" "main" "footer" z grid-template-columns: 1fr. Strona o media queries pokazuje ten wzorzec.

Wyrównanie wewnątrz komórek

Elementy grid domyślnie rozciągają się na całą komórkę. Te właściwości przesuwają je w jej obrębie:

Właściwość	Na	Przesuwa
`justify-items`	kontenerze	każdy element wzdłuż wiersza (oś inline)
`align-items`	kontenerze	każdy element w górę i w dół (oś blokowa)
`place-items`	kontenerze	skrót: `place-items: center` wyśrodkowuje w obu osiach
`justify-self` / `align-self`	elemencie	jeden element
`justify-content` / `align-content`	kontenerze	cały zestaw ścieżek, gdy siatka jest mniejsza niż kontener

display: grid; place-items: center; to najkrótszy sposób na wyśrodkowanie jednego dziecka w pudełku.

Grid czy flexbox

Grid jest dwuwymiarowy: ty decydujesz o kolumnach (i wierszach), a treść je wypełnia, więc każda karta w galerii ma tę samą szerokość, nawet w ostatnim wierszu. Flexbox jest jednowymiarowy: elementy dobierają rozmiar do treści wzdłuż jednej linii. Dobrze się łączą: grid dla strony i galerii kart, flexbox wewnątrz każdej karty dla jej wiersza nagłówka. Strona o flexboxie omawia drugą połowę.

Kolejność i dostępność

grid-template-areas, grid-row, grid-column i order mogą umieścić element w dowolnym miejscu, ale czytniki ekranu i klawisz Tab nadal podążają za kolejnością w HTML. Zadbaj o sensowną kolejność w kodzie źródłowym (nagłówek, nawigacja, treść główna, stopka) i używaj grid do jej rozmieszczenia, a nie do naprawiania kolejności HTML, która nie ma sensu.

Częste błędy

Ustawianie display: grid na elementach. Należy do rodzica; tylko bezpośrednie dzieci są elementami grid.
Procenty razem z odstępami. grid-template-columns: 50% 50% plus gap: 16px wylewa się o 16px. Użyj 1fr 1fr.
auto-fill, gdy chodziło o auto-fit. Przy niewielu elementach auto-fill zostawia puste kolumny. Przełącz na auto-fit, żeby rozciągnąć elementy.
Kolumna 1fr, która rośnie ponad swój udział. Kolumna 1fr nie zwęzi się poniżej swojej najdłuższej treści (długiego adresu URL, szerokiego obrazka). Użyj minmax(0, 1fr), żeby mogła się zwężać.
Ciągi obszarów, które nie są prostokątami. Każdy nazwany obszar musi tworzyć prostokąt, a każdy ciąg wiersza musi mieć tyle samo komórek, inaczej cała deklaracja grid-template-areas zostaje zignorowana.
Zapominanie, że numeracja linii zaczyna się od 1. Trzy kolumny mają cztery linie: 1 / 4 lub 1 / -1 obejmuje wszystkie trzy.

Najczęściej zadawane pytania

Czym jest CSS grid?

To system układu, który umieszcza elementy jednocześnie w wierszach i kolumnach. Ustawiasz display: grid na kontenerze, opisujesz jego kolumny przez grid-template-columns (i opcjonalnie wiersze), a jego bezpośrednie dzieci wypełniają komórki po kolei.

Co oznacza 1fr w CSS grid?

fr to ułamek wolnej przestrzeni w kontenerze grid. grid-template-columns: 1fr 1fr 1fr daje trzy równe kolumny, a 1fr 2fr sprawia, że druga kolumna jest dwa razy szersza od pierwszej. Najpierw odejmowane są stałe rozmiary i odstępy; kolumny fr dzielą się tym, co zostało.

Czym różni się auto-fill od auto-fit?

Oba tworzą tyle kolumn, ile się zmieści. auto-fill zachowuje puste kolumny, więc kilka elementów pozostaje wąskich i na końcu wiersza zostaje puste miejsce. auto-fit zwija puste kolumny, więc elementy rozciągają się na cały wiersz. Gdy elementów wystarczy, żeby wypełnić wiersz, oba wyglądają tak samo.

Jak sprawić, żeby element grid zajmował dwie kolumny?

Użyj na elemencie grid-column: span 2 albo podaj linię początkową i końcową: grid-column: 1 / 3 obejmuje kolumny 1 i 2. grid-column: 1 / -1 zajmuje całą szerokość, bo -1 to ostatnia linia.

Kiedy używać grid zamiast flexboxa?

Używaj grid, gdy wiersze i kolumny muszą się ze sobą wyrównywać: galerie kart, formularze z wyrównanymi etykietami, strona z nagłówkiem, panelem bocznym i stopką. Używaj flexboxa dla pojedynczego wiersza lub kolumny, których elementy dopasowują rozmiar do treści, na przykład paska nawigacji.

Czy grid-gap to to samo co gap?

Tak. grid-gap, grid-row-gap i grid-column-gap to stare nazwy. Przeglądarki nadal akceptują je jako aliasy, ale pisz gap, row-gap i column-gap, które działają też we flexboxie.

Powiązane zagadnienia