Generator CSS Grid — siatka z podglądem

Ustaw kolumny, szerokość i odstępy, zobacz siatkę na żywo i skopiuj gotowy kod CSS Grid.

Układ kolumn Kolumny Szerokość panelu lub karty (px) Odstęp Elementów

Umieść to narzędzie na swojej stronie

Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

Szerokość Wysokość (px) Motyw Kolor akcentu

dopasuj wysokość automatycznie pokaż tytuł

Kod do wklejenia

Jednostka fr

1fr oznacza jedną część wolnego miejsca. Zapis repeat(3, 1fr) tworzy trzy równe kolumny, a 240px 1fr stały panel i elastyczną treść.

repeat(auto-fit, minmax(200px, 1fr)) mieści w wierszu tyle kolumn, ile się da, a na telefonie sam przechodzi do jednej kolumny.

Wybierz karty dopasowane do szerokości i wpisz 200 px. Liczba kolumn zmieni się razem z oknem.

Grid czy Flexbox?

Grid wybierz, gdy układasz wiersze i kolumny jednocześnie. Flexbox lepiej sprawdza się w jednym kierunku.

Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.