ListFan
Arsip · Gratis

Generator CSS Grid

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

Alat ini diarsipkan. Periksa kembali metode dan data bertanggal sebelum digunakan.

01Masukkan nilai

Berjalan di peramban

Berjalan offline di browser. Setelah halaman dan berkas yang diperlukan dimuat, pemrosesan tidak memerlukan internet.

Contoh
px

02Generator CSS Grid

|

Berjalan di peramban

Cara kerja

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

Berjalan di peramban

Data tetap milik Anda

Data diproses di halaman ini dan tidak dikirim ke server.

Tentang alat ini

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

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

Gunakan alat ↑
Cara menggunakan
  1. Masukkan nilai
    • Kolom
    • Baris
    • Jarak
  2. Metode perhitungan

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

  3. Contoh skenario · Hasil

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

Metode perhitungan

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

Generator CSS Grid

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

Pertanyaan umum

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.

Istilah dan definisi

Masukkan nilai

Kolom

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

Masukkan bilangan bulat, bukan pecahan.

Minimum: 1 · Maksimum: 12

Baris

Masukkan bilangan bulat, bukan pecahan.

Minimum: 1 · Maksimum: 12

Jarak

Masukkan nilai numerik besaran ini. Gunakan satuan yang ditampilkan di samping kolom. px

Minimum: 0 · Maksimum: 100 px

Hasil

Hasil

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

Dihitung dari masukan Anda dengan metode di bawah.

Kesalahan umum dan perbaikannya

Generator CSS Grid

Kesalahan: Menggunakan hasil di luar cakupan yang dijelaskan.

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

Batasan dan asumsi utama

  • Buat CSS Grid dengan kolom setara dan sesuaikan kodenya untuk halaman Anda.
  • Hasil dapat dibulatkan; pembulatan tidak meningkatkan ketelitian pengukuran.

Alat lainnya

Semua alat