Pernah nggak kamu coba bikin layout dua kolom, lalu hasilnya malah amburadul? Kolom kanan jatuh ke bawah, gambar melenceng, dan kamu udah rebahan sambil ngerasa "kok susah banget sih jadi web developer?" — Tenang, kamu nggak sendirian. Jutaan pemula merasakan hal yang sama sebelum akhirnya ketemu satu fitur CSS yang mengubah segalanya.
Namanya CSS grid layout dua dimensi — dan di artikel ke-7 dari Seri Belajar CSS ini, kita akan bongkar habis bagaimana cara kerjanya. Bukan sekadar teori, tapi langsung praktik dengan kode nyata yang bisa kamu coba sekarang juga.
🏙️ CSS Grid Layout Dua Dimensi itu Seperti... Denah Kota
Bayangkan kamu lagi ngedesain denah kota. Ada blok-blok bangunan yang tersusun rapi dalam baris dan kolom. Nah, CSS Grid bekerja persis seperti itu — kamu yang menentukan "berapa baris, berapa kolom, dan setiap elemen ada di koordinat mana."
Kalau artikel sebelumnya tentang Flexbox itu ibarat mengatur kursi di satu baris bioskop (satu arah aja), maka CSS Grid ibarat merancang seluruh gedung bioskop — kamu atur baris, kolom, dan bahkan bisa "menggabungkan" kursi-kursi tertentu jadi satu kotak VIP yang lebih besar.
┌──────────┬──────────┬──────────┐ │ Header │ Header │ Header │ ← Row 1 ├──────────┼──────────┼──────────┤ │ Sidebar │ Content │ Content │ ← Row 2 ├──────────┼──────────┼──────────┤ │ Footer │ Footer │ Footer │ ← Row 3 └──────────┴──────────┴──────────┘ Column 1 Column 2 Column 3
CSS Grid pertama kali diimplementasikan secara resmi di browser pada 2017 — dan kini didukung oleh 99%+ browser modern di seluruh dunia. Jadi nggak ada alasan untuk nggak pakai Grid!
📐 Konsep Dasar CSS Grid yang Wajib Kamu Tahu
Sebelum nulis kode, ada beberapa istilah yang perlu kamu pahami dulu. Jangan skip bagian ini — ini fondasi yang akan bikin segalanya lebih masuk akal!
Gunakan Firefox DevTools untuk debug CSS Grid — Firefox punya visualisasi grid terbaik di antara semua browser! Cukup klik ikon grid kecil di sebelah display: grid di panel CSS.
🛠️ Cara Membuat CSS Grid Layout Dua Dimensi dari Nol
Oke, sekarang saatnya kita masuk ke bagian yang paling seru — nulis kode! Ikuti langkah-langkah berikut secara urut, dan kamu akan punya layout CSS grid layout dua dimensi yang berfungsi sempurna dalam hitungan menit.
Buat HTML Structure-nya Dulu
Kita butuh satu elemen induk sebagai container, dan beberapa elemen anak sebagai item grid.
<div class="grid-container">
<div class="item-1">Header</div>
<div class="item-2">Sidebar</div>
<div class="item-3">Konten Utama</div>
<div class="item-4">Footer</div>
</div>
Aktifkan Grid pada Container
Tambahkan display: grid pada elemen induk. Ini "menyalakan" mode Grid.
.grid-container {
display: grid;
}
Tentukan Kolom dengan grid-template-columns
Properti ini menentukan berapa kolom yang kamu mau dan seberapa lebar masing-masingnya. Unit fr (fraction) membagi sisa ruang secara proporsional.
display: grid;
/* 3 kolom: sidebar kecil, konten besar, sidebar kecil */
grid-template-columns: 1fr 3fr 1fr;
gap: 20px; /* jarak antar sel */
}
Tentukan Baris dengan grid-template-rows
Sama seperti kolom, tapi untuk mengatur tinggi baris. Kamu bisa pakai pixel, fr, atau auto.
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 80px auto 60px;
/* baris 1: header 80px, baris 2: otomatis, baris 3: footer 60px */
gap: 16px;
}
Atur Posisi Item dengan grid-column dan grid-row
Inilah saat Grid benar-benar bersinar — kamu bisa memerintahkan satu item untuk membentang melewati beberapa kolom atau baris sekaligus!
.item-1 {
grid-column: 1 / -1; /* -1 = kolom terakhir */
}
/* Footer juga membentang full width */
.item-4 {
grid-column: 1 / -1;
}
/* Sidebar ada di baris 2, kolom 1 */
.item-2 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
Nilai 1 / -1 pada grid-column berarti "mulai dari grid line pertama sampai grid line terakhir". Ini cara paling elegan untuk membuat elemen full-width tanpa perlu tahu berapa kolom yang ada!
🗺️ Level Up: Mendesain Layout dengan grid-template-areas
Kalau kamu sudah nyaman dengan langkah-langkah di atas, ada satu fitur CSS grid layout dua dimensi yang bakal bikin kamu terkesima — grid-template-areas. Fitur ini memungkinkan kamu mendesain layout seperti menggambar sketsa denah, langsung di dalam kode CSS!
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 16px;
min-height: 100vh;
}
/* Assign nama area ke setiap item */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
repeat() dan minmax()Daripada nulis 1fr 1fr 1fr, gunakan shortcut:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsif otomatis! */
Jangan lupakan bahwa grid-area pada item harus menggunakan nama yang sama persis dengan yang kamu tulis di grid-template-areas — termasuk huruf besar/kecilnya!
⚖️ CSS Grid vs Flexbox — Kapan Pakai Yang Mana?
Pertanyaan ini sering banget muncul dari pemula. Jawabannya simpel: keduanya tidak saling menggantikan, tapi saling melengkapi. Ini panduannya:
📊 Analisis Perbandingan: Grid vs Flexbox
- Layout 2D (baris dan kolom)
- Membuat kerangka halaman utama
- Elemen perlu membentang beberapa sel
- Kamu tahu struktur layoutnya dari awal
- Membuat gallery foto / card grid
- Layout 1D (baris ATAU kolom saja)
- Mengatur item dalam navigasi/menu
- Menyejajarkan elemen dalam satu baris
- Konten yang jumlahnya dinamis/tidak pasti
- Centering elemen secara vertikal
💎 Pro tip: Dalam satu halaman web yang kompleks, biasanya kamu akan pakai KEDUANYA — Grid untuk kerangka besar, Flexbox untuk komponen kecil di dalamnya.
🎯 Contoh Nyata: Layout Blog dengan CSS Grid Layout Dua Dimensi
Mari kita praktikkan semuanya dengan membuat layout blog yang nyata dan lengkap — header, sidebar, konten utama, dan footer — dalam satu blok kode yang bisa langsung kamu coba.
.blog-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 70px 1fr 60px;
grid-template-areas:
"nav nav"
"aside article"
"footer footer";
gap: 20px;
min-height: 100vh;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
nav { grid-area: nav; background: #1e1b4b; }
aside { grid-area: aside; background: #f8faff; }
article { grid-area: article; background: #ffffff; }
footer { grid-area: footer; background: #1e1b4b; }
/* ── HTML ── */
<div class="blog-layout">
<nav>Logo & Menu</nav>
<aside>Sidebar: Kategori & Widget</aside>
<article>Konten Blog Utama</article>
<footer>Copyright & Links</footer>
</div>
🏷️ Tags
CSS from Zero to Zorro
Artikel ini bagian dari seri 13 artikel lengkap belajar CSS dari nol. Akses semua artikel di halaman utama seri.
No comments:
Post a Comment