Ilustrasi denah grid webpage dengan satu area yang membentang dua sel

Ini episode keenam sekaligus penutup seri CSS Basic. Episode lalu kamu menguasai Flexbox untuk layout satu dimensi. Sekarang saatnya senjata keduanya: CSS Grid, untuk layout dua dimensi, baris DAN kolom sekaligus. Kalau Flexbox seperti mengatur antrean, Grid seperti menggambar denah bangunan: kamu tentukan dulu petak-petaknya, baru menempatkan isi ke tiap petak. Di akhir episode, kamu akan menggabungkan seluruh seri CSS menjadi satu landing page sederhana.

Dua persepsi salah yang perlu diluruskan. Pertama, banyak pemula menganggap Flexbox dan Grid itu saingan dan harus pilih salah satu. Bukan. Mereka alat untuk pekerjaan berbeda yang justru sering dipakai bersamaan: Grid untuk kerangka besar halaman, Flexbox untuk mengatur isi di dalam tiap petak. Kedua, banyak yang takut pada Grid karena sintaksnya terlihat rumit, padahal ide dasarnya justru sangat visual: kamu benar-benar "menggambar" layout dengan teks.

Denah Dulu, Isi Kemudian

Perbedaan filosofi terbesar Grid vs Flexbox: Flexbox itu content-first, item mengatur dirinya mengikuti isi. Grid itu layout-first, kamu mendefinisikan struktur dulu, isi tinggal menempati. Tiga properti fondasinya:

.denah {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

grid-template-columns: 1fr 1fr 1fr artinya "buat tiga kolom". Satuan fr (fraction) berarti pecahan dari ruang yang tersedia: 1fr 1fr 1fr membagi ruang menjadi tiga sama besar. 1fr 2fr membagi menjadi sepertiga dan dua pertiga. Jauh lebih enak daripada menghitung persen manual, apalagi kalau ada gap yang harus dikurangi. Properti gap memberi jarak antar petak, berlaku untuk baris dan kolom sekaligus.

Fungsi repeat() menyingkat penulisan: repeat(3, 1fr) sama dengan 1fr 1fr 1fr. Dan minmax(240px, 1fr) artinya "minimal 240px, selebihnya bagi rata", kombinasi favorit untuk galeri responsif.

Berhenti dan tebak dulu! Berapa kolom yang dibuat kode ini, dan seberapa lebar masing-masing?

.galeri {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}
Jawaban: 3 kolom, kolom tengah dua kali lebih lebar dari kolom tepi. Total 4 bagian (1+2+1), kolom pertama dapat 1/4 ruang, kolom kedua 2/4, kolom ketiga 1/4, setelah dikurangi total gap. Inilah enaknya fr: kamu berpikir dalam proporsi ("tengah dua kali lipat"), bukan dalam angka persen yang harus dihitung manual. Kalau memakai persen, kamu harus mengurangi gap sendiri, merepotkan.

Menggambar Layout dengan grid-template-areas

Fitur Grid yang paling intuitif: kamu bisa menggambar denah halaman sebagai teks, lalu menempelkan elemen ke area yang digambar.

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
  gap: 16px;
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: konten; }
footer { grid-area: footer; }

Baca denahnya baris per baris: baris pertama, header membentang dua kolom. Baris kedua, sidebar di kolom pertama dan konten di kolom kedua. Baris ketiga, footer membentang dua kolom. Nama yang diulang artinya area itu melebar menutupi sel-sel tersebut. Titik (.) berarti sel kosong yang disengaja. Syaratnya: tiap area harus berbentuk persegi panjang utuh, tidak boleh terpisah.

Untuk menempatkan satu item secara manual tanpa menggambar denah, ada grid-column dan grid-row dengan nomor garis: grid-column: 1 / 3 artinya "mulai di garis 1, berakhir di garis 3", alias membentang dua kolom. Ingat, yang dihitung adalah garis-nya, bukan kolomnya: grid 3 kolom punya 4 garis vertikal. Salah menghitung garis adalah sumber bug paling umum di sini, jadi kalau item-mu "nyasar", hitung lagi garisnya dari tepi.

Flexbox vs Grid, Panduan Memilihnya

Setelah menguasai keduanya, ini aturan praktisnya:

  • Pakai Flexbox kalau konten yang menentukan layout: navbar, barisan tombol, daftar tag, kartu yang mengalir. Kamu tidak tahu pasti berapa itemnya atau seberapa lebar tiap item, yang penting mereka berbaris rapi.
  • Pakai Grid kalau struktur yang menentukan layout: kerangka halaman (header, sidebar, konten, footer), galeri dengan jumlah kolom yang disengaja, dashboard. Kamu menggambar petaknya dulu.
  • Pakai keduanya bersarang: pola paling umum di web profesional. Grid untuk kerangka luar halaman, Flexbox untuk mengatur isi di dalam tiap area. Contoh: area header didefinisikan Grid, isi di dalam header (logo kiri, menu kanan) diatur Flexbox.

Berhenti dan tebak dulu! Kamu mau membuat galeri foto 3 kolom yang rapi, tiap baris sejajar sempurna. Mana alat yang tepat, dan kenapa bukan yang satunya?

Jawaban: Grid. Karena galeri butuh keselarasan dua dimensi: kolom-kolom sejajar vertikal DAN baris-baris sejajar horizontal. Flexbox dengan flex-wrap memang bisa membuat barisan yang melipat, tapi tiap barisnya independen, tidak ada jaminan kolom baris kedua sejajar dengan kolom baris pertama. Grid memberi sistem koordinat yang sama untuk semua item. Aturan ingatannya: kalau butuh kesejajaran dua arah, itu pekerjaan Grid.

Kuis cepat: Manakah pernyataan yang benar?

Grid Responsif Tanpa Media Query

Salah satu trik Grid paling memuaskan adalah galeri yang jumlah kolomnya menyesuaikan sendiri dengan lebar layar, tanpa sebaris pun media query:

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Uraikan cara membacanya: minmax(240px, 1fr) artinya tiap kolom minimal 240px dan selebihnya berbagi rata. auto-fit artinya "buat kolom sebanyak yang muat". Di layar lebar 1200px, muat 4 kolom lebih. Di HP 360px, hanya muat 1 kolom. Browser menghitung ulang otomatis setiap kali ukuran berubah. Ini pola yang dipakai banyak galeri foto dan katalog produk di web nyata.

Bedakan auto-fit dengan sepupunya auto-fill: auto-fill tetap membuat kolom kosong tak terlihat kalau item kurang, sedangkan auto-fit merentangkan item yang ada untuk mengisi ruang. Untuk galeri, auto-fit hampir selalu yang kamu mau. Coba ganti satu kata itu di DevTools dan perhatikan bedanya secara langsung.

Berhenti dan tebak dulu! Layar selebar 800px, kode galeri memakai repeat(auto-fit, minmax(240px, 1fr)) dengan gap: 16px. Kira-kira berapa kolom yang tampil?

Jawaban: 3 kolom. Tiap kolom butuh minimal 240px. 3 kolom butuh 720px plus 2 gap (32px) = 752px, masih muat di 800px. 4 kolom butuh 960px plus 3 gap (48px) = 1008px, tidak muat. Jadi browser membuat 3 kolom dan merentangkannya mengisi 800px penuh. Coba bayangkan menghitung ini manual dengan persen untuk tiap ukuran layar, lalu bersyukurlah ada auto-fit.

Proyek: Landing Page Sederhana

Proyek penutup seri CSS Basic. Buat file landing.html (dengan landing.css terpisah) untuk produk khayalanmu, misalnya aplikasi catatan atau warung kopi. Syaratnya:

  1. Kerangka Grid: pakai grid-template-areas untuk denah: header (navigasi), hero (judul besar + tombol), fitur (3 kolom), testimoni, footer. Lima area, satu denah.
  2. Isi Flexbox: di dalam tiap area, pakai Flexbox: navbar dengan space-between, tiga kartu fitur dengan flex: 1 dan gap, tombol hero yang di-center.
  3. Box model benar: box-sizing: border-box di baris pertama, padding untuk napas dalam kartu, margin untuk jarak antar section.
  4. Warna dan font disengaja: satu palet HSL (brand, hover, latar), maksimal dua font, kontras teks-latar yang nyaman dibaca.
  5. Responsif seadanya: di layar sempit, denah Grid boleh tetap, tapi pastikan kartu fitur memakai flex-wrap atau minmax() sehingga tidak hancur. Uji dengan mengecilkan jendela browser.
  6. Jangan jiplak template. Pilih produk khayalanmu sendiri, tulis copywriting-nya sendiri (judul, deskripsi fitur, testimoni karangan yang masuk akal). Landing page yang copy-paste tidak melatih selera desainmu.

Kalau landing page-mu jadi, kamu resmi lulus HTML Basic dan CSS Basic: bisa membuat halaman terstruktur, bermakna, rapi, dan responsif. Seri berikutnya adalah JavaScript Basic, dibuka dengan episode Kenalan dengan JavaScript, Otak di Balik Web Interaktif. Selama ini halamanmu diam saja. Setelah ini, dia bisa merespons klik, mengingat input, dan mengubah dirinya sendiri. Siapkan rasa penasaranmu.