Generator CSS Grid
Zbuduj siatkę CSS (kolumny, wiersze, gap) na żywo i skopiuj CSS.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Siatka CSS, budowana na żywo
Wybierz liczbę kolumn, wierszy i odstęp: podgląd pokazuje komórki w czasie rzeczywistym, a CSS kontenera jest gotowy do skopiowania.
-
Ustaw kolumny
Od 1 do 8 równych torów (1fr).
-
Ustaw wiersze i gap
Liczba wierszy i odstęp.
-
Skopiuj CSS
Zastosuj do kontenera grid.
CSS kontenera (domyślnie)
| Właściwość | Wartość |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
Jednostka 1fr dzieli przestrzeń po równo. Dla responsywności zastąp przez repeat(auto-fit, minmax(...)). Wszystko generowane lokalnie.
Najczęstsze pytania
Jaka różnica między CSS Grid a Flexbox?
Flexbox układa elementy na jednej osi (wiersz lub kolumna); Grid działa w dwóch wymiarach (kolumny i wiersze naraz). Grid jest idealny do pełnych układów stron, Flexbox do prostych wyrównań.
Co oznacza repeat(3, 1fr)?
To skrót od „3 kolumny po 1 frakcji każda”. Jednostka fr dzieli dostępną przestrzeń po równo. repeat(3, 1fr) tworzy więc trzy kolumny o równej szerokości wypełniające kontener.
Jak uczynić siatkę responsywną?
Zastąp stałą liczbę przez repeat(auto-fit, minmax(200px, 1fr)): kolumny dostosowują się automatycznie do szerokości. To narzędzie generuje bazę o stałej liczbie, którą można potem dostosować.
Czy CSS dotyczy kontenera czy komórek?
Kontenera: display: grid i właściwości grid-template definiują strukturę. Komórki potomne układają się same w utworzonych torach.