Dasar Grid
Grid adalah sistem tak terlihat yang mengatur posisi teks dan gambar agar ritmis dan konsisten. Tujuannya bukan membatasi kreativitas, tetapi memberi kerangka untuk keputusan tata letak yang cepat dan terukur.
Kolom & Gutter
Pilih jumlah kolom berdasarkan lebar konten dan jenis materi. Editorial umum: 3–6 kolom. Gutter (jarak antar kolom) harus cukup untuk memisahkan, namun tidak terlalu lebar hingga memotong alur pandang.
Modul 12 & Variasi
Sistem 12 kolom populer karena fleksibel (12, 6, 4, 3, 2, 1). Kombinasikan lebar kolom menjadi modul yang membentuk pola hierarki—misalnya 8/4 untuk kombinasi artikel + sidebar.
Baseline Grid
Jaga ritme vertikal dengan baseline grid. Pilih leading (line-height × font-size) lalu pastikan margin/padding mengikuti kelipatan baseline agar tepi paragraf dan komponen sejajar rapi.
Praktik Terbaik
- Gunakan kolom lebih banyak untuk teks panjang; lebih sedikit untuk layout visual.
- Pertahankan gutter konsisten; naik 1–2 step saja di layar lebar.
- Pastikan heading, gambar, dan caption snap ke baseline.
- Sediakan variasi pola (mis. 8/4, 7/5, 6/6) tetapi tetap batasi pilihan agar konsisten.
Snippet CSS
/* Grid 12 responsif */
.container{max-width:1120px;margin:auto;padding:20px}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
@media (max-width:720px){
.col-8,.col-6,.col-4{grid-column:span 12}
}
/* Baseline helper (8px step) */
:root{--base:8px}
body{line-height:1.6}
.section{margin-block:calc(var(--base)*4)}
.h1{margin-bottom:calc(var(--base)*2)}
.p{margin-bottom:var(--base)}
Butuh contoh aplikatif? Coba pattern Tipografi & Tata Letak atau lihat Galeri Editorial untuk referensi ritme.