Projektowanie · Bezpłatne

Generator CSS Grid

Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

01Wprowadź wartości

Działa w przeglądarce

—

Działa w przeglądarce

Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

Działa w przeglądarce

Dane są przetwarzane na tej stronie i nie są wysyłane na serwer.

O narzędziu

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Wprowadź wartości
Kolumny · Wiersze · Odstęp
Oblicz / wygeneruj
Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.
Wynik
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Przykładowy scenariusz

Wynik

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Jak interpretować wynik?

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Dokąd trafiają moje dane?

Obliczenia odbywają się na Twoim urządzeniu. Dane nie są wysyłane na serwer.