Container adalah kotak yang membatasi lebar isi halaman, dan grid adalah kolom-kolom tak terlihat di dalamnya yang menentukan di mana tiap elemen berdiri. Bayangin lemari pajangan di toko kelontong: lemarinya punya lebar tetap (container), di dalamnya ada sekat-sekat yang sama lebar (kolom), dan di antara sekat ada papan pemisah (gutter). Barang besar makan dua atau tiga sekat, barang kecil cukup satu, tapi semuanya tetap lurus karena sekatnya sama.
🧪 Tebakan cepat: Halaman Homestay Kabut sekarang punya tiga kartu kamar di grid 12 kolom dengan jarak 24px, di dalam container 1200px. Tiap kartu memakai 4 kolom. Di layar laptop 1280px, satu kartu selebar berapa px? Jawabannya ada di bagian "Menghitung lebar kartu".
Tiga kartu kamar
Bu Sri sekarang punya tiga kamar, dan ketiganya tampil berjajar di halaman pesan:
| Kamar | Harga per malam | Tamu |
|---|---|---|
| Kamar Teras | Rp 350.000 | 2 |
| Kamar Loteng | Rp 275.000 | 2 |
| Kamar Kebun | Rp 425.000 | 4 |
Tanpa aturan apa pun, tiga kartu ini akan melebar sepanjang layar. Di monitor 1920px, satu kartu bisa selebar 600px lebih, dan mata harus menyeberang jauh untuk membandingkan harga. Dua alat membereskannya: container dan grid.
Container: batas lebar halaman
.container {
max-width: 1200px; /* isi paling lebar 1200px */
margin: 0 auto; /* sisa ruang dibagi rata kiri dan kanan */
padding: 0 1.5rem; /* 24px, supaya isi gak nempel ke tepi layar HP */
}
max-width: 1200pxartinya "boleh lebih sempit, gak boleh lebih lebar". Di HP container ikut sempit, di monitor besar dia berhenti di 1200px.margin: 0 auto: atas bawah 0, kiri kananauto. Browser membagi sisa ruang sama besar ke kiri dan kanan, jadi container berada di tengah.padding: 0 1.5remmemberi jarak 24px di kiri dan kanan isi. Denganbox-sizingbawaan (content-box), 1200px itu lebar isinya, dan padding ada di luarnya: kotaknya total 1200 + 48 = 1248px.
Hasilnya di empat lebar layar (contoh ini memakai body { margin: 0 }):
| Layar | Lebar isi container | Ruang kosong di tiap sisi |
|---|---|---|
| 375px (HP) | 375 - 48 = 327px | 24px padding |
| 768px (tablet) | 768 - 48 = 720px | 24px padding |
| 1280px (laptop) | 1200px | (1280 - 1248) / 2 = 16px, ditambah padding 24px = 40px |
| 1920px (monitor) | 1200px | (1920 - 1248) / 2 = 336px, ditambah padding 24px = 360px |
Website umum biasanya memakai container sekitar 1024 sampai 1280px; latihan ini memakai 1200px. Bootstrap 5, misalnya, memakai 1140px untuk layar 1200px ke atas dan 1320px untuk 1400px ke atas. Untuk halaman artikel yang isinya teks panjang, batasi lebar teksnya sekitar 65ch, seperti di pelajaran ukuran font.
Grid 12 kolom
Kenapa 12? Karena 12 habis dibagi 1, 2, 3, 4, 6, dan 12. Dari satu grid kamu bisa bikin 2 kolom sama lebar (6 + 6), 3 kolom (4 + 4 + 4), 4 kolom (3 + 3 + 3 + 3), atau konten dan sidebar (8 + 4). Grid 10 kolom gak bisa dibagi tiga dengan rata. Itu sebabnya grid 12 kolom dipakai Bootstrap dan banyak design system.
<div class="container">
<div class="grid">
<div class="card"><h2>Kamar Teras</h2><p>Rp 350.000 / malam</p></div>
<div class="card"><h2>Kamar Loteng</h2><p>Rp 275.000 / malam</p></div>
<div class="card"><h2>Kamar Kebun</h2><p>Rp 425.000 / malam</p></div>
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 12 kolom sama lebar */
gap: 1.5rem; /* gutter 24px */
}
.card { grid-column: span 4; } /* tiap kartu makan 4 dari 12 kolom */
</style>
display: gridmenjadikan.gridsebuah grid, dan anak-anaknya (kartu) jadi isinya.repeat(12, 1fr)bikin 12 kolom.frartinya satu bagian dari ruang yang tersisa, jadi 12 kolom ini sama lebar.gapadalah jarak antar kolom, yang di dunia desain disebut gutter.grid-column: span 4membuat satu kartu memakai 4 kolom berturut-turut. Tiga kartu × 4 kolom = 12, pas satu baris.
Menghitung lebar kartu
Grid 12 kolom punya 11 gutter di antara kolomnya. Jadi:
- lebar kolom = (lebar isi - 11 × gap) / 12
- lebar kartu span n = n × lebar kolom + (n - 1) × gap
Di laptop 1280px, isi container 1200px dan gap 24px:
- kolom = (1200 - 11 × 24) / 12 = 936 / 12 = 78px
- kartu span 4 = 4 × 78 + 3 × 24 = 312 + 72 = 384px
Satu kartu selebar 384px. Itu jawaban tebakannya.
Bandingkan dengan repeat(3, 1fr), tiga kolom saja: (1200 - 2 × 24) / 3 = 1152 / 3 = 384px. Hasilnya sama persis. Jadi kalau isi grid-nya cuma kartu yang sama lebar, repeat(3, 1fr) adalah cara singkat menulis hal yang sama, dan latihan memakai cara singkat ini. Grid 12 kolom berguna begitu halamanmu mencampur lebar: deskripsi kamar span 8 di samping kotak pesan span 4.
Gutter dan layar kecil
Gutter yang umum diambil dari skala jarak: 16px untuk halaman padat, 24px untuk kebanyakan halaman, 32px untuk halaman yang lega. Yang penting satu nilai untuk seluruh halaman.
Masalah muncul di HP. Di layar 375px, isi container 327px, jadi kolom = (327 - 264) / 12 = 5,25px, dan kartu span 4 = 4 × 5,25 + 72 = 93px. "Rp 350.000 / malam" gak muat di situ. Di HP, biarkan tiap kartu memakai seluruh 12 kolom:
.card { grid-column: span 12; } /* HP: 327px, satu kartu satu baris */
@media (min-width: 768px) {
.card { grid-column: span 4; } /* 768px ke atas: tiga kartu berjajar */
}
- Aturan pertama berlaku di semua layar: satu kartu selebar container.
@media (min-width: 768px)hanya berlaku di layar 768px atau lebih. Di tablet 768px, kolom = (720 - 264) / 12 = 38px, jadi kartu span 4 = 4 × 38 + 72 = 224px.
⚠️ Jebakan yang sering ketemu
- Lupa
margin: 0 auto. Container-nya berhenti di 1200px tapi menempel ke kiri. Di monitor 1920px, semua ruang kosong 672px numpuk di kanan. - Lupa padding container. Di HP, teks kartu menempel ke tepi layar.
- Span lebih dari 12 dalam satu baris. Span 4 + 4 + 6 = 14: sisa baris cuma 4 kolom, jadi kartu ketiga turun ke baris baru.
- Gap beda-beda. 20px di satu bagian, 30px di bagian lain. Pilih satu gutter dari skala jarakmu dan pakai di semua grid.
- Kolom lebih sempit dari isinya. Grid gak menyelamatkanmu: kartu span 3 di HP 375px benar-benar cuma 3 × 5,25 + 2 × 24 = 63,75px, dan kata yang lebih panjang dari itu meluber keluar kartunya. Hitung dulu, baru pilih span.
TL;DR: Container membatasi lebar isi: max-width: 1200px (website umum 1024 sampai 1280px), margin: 0 auto untuk ke tengah, padding: 0 1.5rem supaya isi gak nempel ke tepi. Grid 12 kolom (display: grid; grid-template-columns: repeat(12, 1fr)) bisa dibagi 2, 3, 4, dan 6. Jarak antar kolom disebut gutter (gap), misalnya 24px. Lebar kolom = (lebar isi - 11 × gap) / 12, dan kartu span n = n × kolom + (n - 1) × gap: di 1280px, kolom 78px dan kartu span 4 jadi 384px, sama dengan repeat(3, 1fr). Di HP 375px span 4 cuma 93px, jadi pakai span 12 dan naikkan ke span 4 dengan @media (min-width: 768px).
