grid-template-areas: layout yang bisa dibaca
grid-template-areas membuat layout yang terlihat seperti bentuknya di dalam CSS — sangat mudah dibaca saat maintenance. Setiap area diberi nama, lalu item ditempatkan dengan grid-area: nama. Cocok untuk layout halaman utuh: header, sidebar, main, footer. Setiap baris string wajib memuat jumlah nama area yang sama; kalau tidak, seluruh aturan diabaikan browser tanpa pesan error apa pun.
👀 Contoh dulu
.app {
display: grid;
grid-template-areas:
"atas atas"
"menu isi"
"bawah bawah";
}
.navbar { grid-area: atas; }
.menu { grid-area: menu; }
.konten { grid-area: isi; }
.footer { grid-area: bawah; }Hasilnya: Layout terbentuk sesuai gambar di grid-template-areas: navbar penuh di atas, menu di kiri, konten di kanan, footer penuh di bawah.
💡 Nama yang diulang ('atas atas') berarti area itu membentang melintasi kolom-kolom tersebut.
📝 Sekarang giliranmu
Lengkapi: beri .header grid-area: header, .sidebar grid-area: sidebar, dan .main grid-area: main.