Softonic

Generator CSS Grid

Krok 1 / 3
Dalej

CSS Grid to standardowy sposób budowania układów 2D, ale składnię kontenera łatwo zapomnieć. Ten generator pisze reguły kontenera za Ciebie: stałą liczbę kolumn o równej szerokości, odstęp między torami oraz media query przełączające się na kolumny auto-fit poniżej minimalnej szerokości, aby układ pozostał czytelny na małych ekranach. Wynik to czysty CSS kontenera; rozmieszczenie elementów zostaje w Twoim arkuszu stylów.

Jak zbudować siatkę

  1. 1

    Ustaw liczbę kolumn

    Od 1 do 12 torów o równej szerokości.

  2. 2

    Ustaw minimalną szerokość kolumny

    Poniżej tej szerokości siatka przełącza się na auto-fit, aby każda kolumna zachowała minimalną użyteczną wielkość.

  3. 3

    Ustaw odstęp

    Przestrzeń między kolumnami i wierszami.

  4. 4

    Wygeneruj CSS

    Narzędzie zapisuje reguły kontenera oraz responsywną alternatywę.

  5. 5

    Skopiuj kod

    Wklej reguły kontenera do arkusza stylów i rozmieszczaj elementy własnymi regułami `grid-column` / `grid-row`.

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.

Najczęściej zadawane pytania

Chroni układ na małych ekranach. Wygenerowane media query przełącza się na repeat(auto-fit, minmax(szerokość, 1fr)), więc każda kolumna zachowuje co najmniej tę szerokość, a siatka dodaje wiersze zamiast ściskać kolumny.

Generator tworzy równe kolumny. Zmień linię grid-template-columns w wyniku, aby mieszać rozmiary, na przykład 1fr 2fr 1fr dla szerokiej środkowej kolumny albo 200px 1fr dla stałego paska bocznego.

Zwykle dlatego, że element ma domyślny min-width: auto, który odpowiada minimalnej szerokości jego zawartości. Ustaw min-width: 0 na elemencie siatki, aby mógł się zwężać wewnątrz komórki.

Grid, gdy układ ma strukturę wierszy i kolumn (układ strony, galeria zdjęć, panel). Flexbox, gdy elementy płyną wzdłuż jednej osi (pasek nawigacji, rząd przycisków, stos pól formularza).

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 z krótkiego formularza: ustaw entry, folder wyjściowy i tryb, a następnie włącz TypeScript, Babel, loader CSS, HtmlWebpackPlugin i serwer deweloperski.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Narzędzie odstępów w kodzie Python

Ujednolić wcięcia oraz proste odstępy przy przecinkach i operatorach. To lekka obróbka tekstu, a nie Black, Ruff ani parser Pythona.

Licznik FPS

Zmierz FPS w przeglądarce za pomocą requestAnimationFrame: wygładzanie, minimalna i maksymalna liczba klatek, próg ostrzeżenia i opcjonalny wykres. Działa lokalnie, bez wysyłania danych i bez API.

Generator losowych adresów

Twórz od 1 do 20 rekordów podobnych do adresów do makiet i testów, w trzech uproszczonych formatach.

Generator przycisków CSS

Zaprojektuj przycisk CSS z jednolitym lub gradientowym tłem, podglądem sześciu stanów, kontrolą kontrastu oraz bezpiecznym kodem HTML i CSS.

Narzędzie jest dostępne w innych językach