Generator CSS Grid

Wygenerowany kontener

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): trzy kolumny dzielące dostępną szerokość po równo. 1fr to ułamek pozostałej przestrzeni; minmax(0, 1fr) pozwala kolumnom zmniejszać się poniżej rozmiaru zawartości.
• gap: odstęp między każdym torem.
• Media query przełącza się na repeat(auto-fit, minmax(220px, 1fr)), czyli tyle kolumn, ile się zmieści, każda o szerokości co najmniej 220px. Punkt przełomowy to liczba kolumn razy minimalna szerokość (z minimum 120px), więc na małych ekranach siatka łamie się do kolejnych wierszy zamiast się ściskać.

Jednostka fr

fr oznacza “ułamek pozostałej przestrzeni”: po odjęciu torów o stałym rozmiarze pozostała przestrzeń jest dzielona przez łączną liczbę jednostek fr.

grid-template-columns: 200px 1fr 2fr;

Na kontenerze o szerokości 1000px pierwsza kolumna zajmuje 200px, a pozostałe 800px dzielą się w stosunku 1:2, czyli 267px i 533px.

auto-fill a auto-fit

• auto-fill: tworzy puste tory wypełniające, gdy nie ma wystarczającej liczby elementów.
• auto-fit: zwija puste tory do zera, więc pozostałe elementy rozciągają się, wypełniając wiersz.

Responsywna alternatywa używa auto-fit, czego potrzebują siatki kart: wiersz zawsze wygląda na pełny.

Kolumny o różnych szerokościach

Generator tworzy równe kolumny. Zmień wynik, aby mieszać rozmiary: grid-template-columns: 200px 1fr 2fr; daje stały pasek boczny i dwie elastyczne kolumny w stosunku 1:2. Dla obszarów nazwanych (grid-template-areas) lub jawnego rozmieszczania (grid-column: 1 / 3) dodaj te reguły ręcznie na bazie wygenerowanego kontenera.

Grid a Flexbox

• Grid: jawny układ 2D z torami. Dobry, gdy układ ma strukturę wierszy i kolumn (szkielet strony, galeria, panel).
• Flexbox: wyrównanie 1D wzdłuż jednej osi. Dobry, gdy elementy płyną naturalnie (pasek nawigacji, rząd przycisków).

Realne układy zwykle łączą oba: Grid dla szkieletu strony, Flexbox wewnątrz komponentów.

Częste błędy

• Zapomniany min-width: 0 na dzieciach: elementy siatki domyślnie mają minimalną szerokość zawartości, co uniemożliwia kolumnom fr zmniejszanie się poniżej najdłuższego słowa. Ustaw min-width: 0 na dzieciach, aby mogły się zwężać.
• Zagnieżdżanie bez display: grid: dziecko siatki nie jest samo siatką, dopóki tego nie zadeklarujesz.