TL
Tool Lab
💰Donate
💰Donate

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

O tym narzędziu

Generator CSS Grid Layout pozwala wizualnie projektować dwuwymiarowe układy siatki, dostosowując grid-template-columns, grid-template-rows, właściwości gap i ustawienia wyrównania. Podgląd na żywo pokazuje dokładnie jak będzie wyglądać siatka przed napisaniem kodu.

CSS Grid to najpotężniejszy system układu w CSS, zaprojektowany dla dwuwymiarowych układów (wiersze I kolumny jednocześnie). Uzupełnia Flexbox, który obsługuje układy jednowymiarowe.

Jak używać

  1. Ustaw grid-template-columns dla struktury kolumn. Użyj przycisków preset dla typowych wzorców.
  2. Opcjonalnie ustaw grid-template-rows (zostaw auto dla większości układów).
  3. Dostosuj column-gap i row-gap dla odstępów.
  4. Użyj justify-items i align-items do kontroli rozmieszczenia elementów w komórkach.
  5. Zmień liczbę elementów suwakiem, aby zobaczyć jak siatka reaguje.
  6. Kliknij Kopiuj, aby skopiować wygenerowany CSS.

Przypadki użycia

Deweloperzy front-end używają CSS Grid do układów stron, struktur dashboardów i galerii obrazów. Projektanci eksportują specyfikacje siatki jako dokładny CSS do dzielenia się z deweloperami. Zespoły design system używają go do prototypowania wzorców odstępów i kolumn.

Często zadawane pytania

  • Co oznacza 1fr? — fr to jednostka ułamkowa. 1fr oznacza jedną część dostępnej przestrzeni. repeat(3, 1fr) tworzy trzy równe kolumny.
  • Kiedy używać Grid, a kiedy Flexbox? — Używaj Grid do dwuwymiarowych układów (wiersze i kolumny). Używaj Flexbox przy układaniu elementów w jednym kierunku.
  • Czy CSS Grid jest obsługiwany w wszystkich przeglądarkach? — Tak. CSS Grid jest w pełni obsługiwany we wszystkich nowoczesnych przeglądarkach od 2017 roku.