Kalkulator Grid Layout (Kolom, Gutter, Grid 8pt)
Masukkan lebar layar atau halaman, jumlah kolom, gutter, dan margin untuk mendapatkan lebar kolom yang tepat, dengan pratinjau grid 8pt. Mendukung px dan mm
Memuat alat…
Masukkan lebar total, jumlah kolom, gutter, dan margin samping untuk mendapatkan lebar satu kolom dan lebar beberapa kolom berurutan. Berguna untuk grid web 12 kolom atau untuk membagi halaman cetak dalam milimeter.
Cara pakai
- Pilih px atau mm di "Satuan", lalu pilih "Preset lebar" atau ketik "Lebar total".
- Masukkan "Kolom", "Gutter", dan "Margin". Jika margin tidak sama, ubah "Margin samping" ke "Kiri dan kanan".
- Baca "Lebar kolom" dan tabel "Lebar gabungan", lalu periksa lencana apakah pas dengan grid yang dipilih di "Satuan grid". Jika tidak pas, coba lebar total yang disarankan di catatan.
- Nyalakan "Bandingkan tiga breakpoint" untuk melihat tiga lebar sekaligus, dan tekan "Salin CSS" untuk mengambil kodenya.
Cara kerja
- Lebar kolom = (lebar total − margin kiri − margin kanan − gutter × (kolom − 1)) ÷ kolom. Lebar n kolom = lebar kolom × n + gutter × (n − 1).
- Dengan "Lebar konten maksimum", lebar total yang lebih besar menjaga konten pada lebar itu dan membagi sisanya ke kedua margin.
- Dalam mode mm satuan grid dalam poin: 1 pt = 0,3528 mm, dan 1 mm = 3,78 px pada 96 dpi.
- Nilai yang Anda masukkan disimpan di browser perangkat ini.
Pertanyaan umum
- Berapa lebar kolom pada grid 1200 px dengan 12 kolom?
- Dengan gutter 24 px dan tanpa margin, (1200 − 24 × 11) ÷ 12 = 78 px. Dengan gutter 32 px menjadi 70,67 px.
- Bagaimana jika lebar kolom tidak pas di grid 8 px?
- Catatan menyebutkan kelipatan terdekat dan lebar total yang menghasilkannya: kolom 78 px menjadi 80 px pada lebar konten 1224 px. Sedikit mengubah gutter atau margin juga bisa.
- Berapa kolom yang sebaiknya dimiliki halaman A4?
- Tidak ada satu jawaban. Dua atau tiga cocok untuk teks; enam atau dua belas memudahkan mencampur foto dan tabel. Masukkan A4 210 mm, margin 15 mm, dan gutter 4 mm untuk membandingkan.
- Bagaimana cara memakai CSS yang disalin?
- .container mengatur lebar konten dan padding samping; .grid mengatur kolom dan jarak. Elemen yang melintasi beberapa kolom diberi grid-column: span 4. Dalam mode mm cuplikan juga memuat margin @page untuk cetak.