Generator siatki CSS

Zdefiniuj wizualnie kolumny, wiersze i przerwy, a następnie skopiuj kod szablonu CSS Grid dla swojego układu.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

Zdefiniuj wizualnie kolumny, wiersze i przerwy, a następnie skopiuj kod szablonu CSS Grid.
Działa w Twojej przeglądarce
Bezpłatne

Jak używać

Ustaw liczbę kolumn i wierszy.
Dostosuj odstęp i rozmiar ścieżki.
Skopiuj CSS siatki.

How this tool works

Ustaw liczbę kolumn i wierszy.
Dostosuj odstęp i rozmiar ścieżki.
Skopiuj CSS siatki.

Recommended settings

Najpierw użyj opcji domyślnych, a następnie dostosuj je w razie potrzeby

Supported formats

Text / on-page input

File size and limits

Bardzo złożone wielowarstwowe podglądy mogą działać wolniej na starszych telefonach.

Privacy

Generatory kolorów i CSS działają całkowicie w przeglądarce. Podglądy i konwersje nigdy nie przesyłają Twoich stylów.

Common use cases

Używaj generatora siatki CSS, kiedy tylko potrzebujesz: wizualnie zdefiniuj kolumny, wiersze i luki, a następnie skopiuj kod szablonu CSS Grid.

Troubleshooting

Podgląd wygląda inaczej po wklejeniu

Sprawdź, czy na Twojej stronie nie ma konkurencyjnych CSS (resetowanie, dziedziczone kolory). Najpierw skopiuj wygenerowaną regułę do izolowanego arkusza stylów.

FAQ

Czy to przesyła mój CSS?

Nie. Generatory i konwertery działają w Twojej przeglądarce z podglądem na żywo.

Czy potrzebuję konta?

Nie. Otwórz narzędzie, dostosuj elementy sterujące i skopiuj CSS.

Powiązane narzędzia

Flexbox Generator

Experiment with flex direction, wrap, justify, and align — see layouts update live.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool