Materi
Properti grid-template-areas memberi nama pada tiap sel, ditulis sebagai baris-baris teks. Nama yang sama berulang berarti satu elemen menempati beberapa sel berdampingan.
.halaman {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"kepala kepala"
"samping isi";
gap: 16px;
}
.kepala { grid-area: kepala; }Baris pertama berisi nama kepala dua kali, jadi header menempati dua kolom. Baris kedua memberi kolom kiri ke samping dan kolom kanan ke isi.
Setiap baris denah adalah satu teks dalam tanda kutip, dan setiap kata di dalamnya mewakili satu sel. Jumlah kata di tiap baris harus sama dengan jumlah kolom di grid-template-columns; kalau tidak sama, seluruh nilai grid-template-areas diabaikan dan isi halaman kembali tersusun otomatis. Sel yang sengaja dikosongkan ditulis dengan satu titik atau lebih, misalnya baris ". isi" yang menyisakan kolom kiri kosong.
Karena denah ditulis dengan nama, menukar posisi sidebar dan konten cukup dengan menukar kata di dalam denah, tanpa mengubah urutan HTML. Contoh lain di luar latihan: halaman laporan yang memakai denah "kepala kepala" lalu "isi samping" memindahkan sidebar ke kanan hanya dengan satu baris teks.
