Di Grid, tiap bagian halaman bisa diberi nama, misalnya header, sidebar, content, lalu layout-nya digambar pakai nama-nama itu, kayak denah rumah. Buat satu item yang cuma perlu melebar, ada cara yang lebih singkat: suruh dia menempati beberapa kolom dengan span.
🧪 Tebakan cepat: di peta
"header header" "sidebar content", header selebar berapa kolom? Tebak dulu, jawabannya ada di bagian "Gambar layout dengan grid-template-areas".
Gambar layout dengan grid-template-areas
.page {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 8px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
- Tiap string dalam tanda kutip adalah satu baris grid. Ada tiga string, jadi ada tiga baris.
- Tiap kata di dalam string adalah satu kolom. Kolomnya dua (
120px 1fr), jadi tiap string berisi dua kata. - Nama yang sama dan bersebelahan digabung jadi satu area.
"header header"artinya header menempati dua kolom, selebar halaman. Itu jawaban tebakannya. grid-area: headerdi.headermenaruh elemen itu di area bernamaheader. Tanpa baris ini, nama di peta gak nyambung ke elemen mana pun.
Hasilnya, header di atas selebar halaman, sidebar sempit di kiri, konten lebar di kanan, dan footer di bawah selebar halaman. Jadi ada dua bagian: peta di container, nama area di tiap item.
Mau satu sel dibiarkan kosong? Tulis titik . di tempatnya, misalnya ". footer".
Melebar beberapa kolom dengan span
.header {
grid-column: span 2;
}
grid-column: span 2 bikin item menempati dua kolom berturut-turut, tanpa perlu peta. Bisa juga ditulis pakai nomor garis: grid-column: 1 / 3, artinya dari garis kolom 1 sampai garis 3. Garis adalah batas antar kolom, jadi grid dua kolom punya tiga garis.
⚠️ Jebakan yang sering ketemu
- Jumlah kata tiap baris beda.
"a b" "c d e"gak valid, dan browser membuang seluruh petanya. Tiap string harus punya jumlah kata yang sama dengan jumlah kolom. - Area gak berbentuk persegi panjang. Nama yang sama harus membentuk kotak. Bentuk L atau zigzag gak valid.
- Lupa
grid-areadi item. Petanya sudah ada, tapi item-itemnya gak tahu harus ke mana. - Ejaan nama beda.
contentdi peta dankontendi item dianggap dua nama yang berbeda.
💡 Ubah layout tanpa ubah HTML. Tulis ulang
grid-template-areasdi dalam media query, misalnya jadi satu kolom buat layar HP, dan semua bagian halaman pindah tempat tanpa menyentuh HTML-nya.
TL;DR: grid-template-areas menggambar layout di container: satu string per baris, satu kata per kolom, nama yang sama bersebelahan jadi satu area, titik . buat sel kosong. Lalu tiap item diberi grid-area: nama biar masuk ke areanya. Buat satu item yang cuma perlu melebar, pakai grid-column: span 2.
