Desain · Gratis

Generator CSS Grid

Buat pratinjau kisi dan CSS dari kolom, baris dan jarak.

01Masukkan nilai

Berjalan di peramban

—

Berjalan di peramban

Buat pratinjau kisi dan CSS dari kolom, baris dan jarak.

Berjalan di peramban

Data diproses di halaman ini dan tidak dikirim ke server.

Tentang alat ini

Buat CSS Grid dengan kolom setara dan sesuaikan kodenya untuk halaman Anda.

Masukkan nilai
Kolom · Baris · Jarak
Hitung / buat
Buat pratinjau kisi dan CSS dari kolom, baris dan jarak.
Hasil
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Buat CSS Grid dengan kolom setara dan sesuaikan kodenya untuk halaman Anda.

Contoh skenario

Hasil

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

Bagaimana membaca hasil?

Buat CSS Grid dengan kolom setara dan sesuaikan kodenya untuk halaman Anda.

Ke mana data saya dikirim?

Perhitungan berjalan di perangkat Anda. Masukan tidak dikirim ke server.