Grid · Pelajaran 8
Tujuan: Pengguna dapat menyusun header, sidebar, dan konten dengan grid-template-areas.
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.
Misi akhir modul. Selesaikan minimal 4 dari 4 tugas untuk menuntaskan modul ini.
Susun halaman profil: .halaman jadi grid dengan grid-template-columns: 200px 1fr dan grid-template-areas berisi "kepala kepala" lalu "samping isi", gap 16px. Hubungkan .kepala, .samping, dan .isi dengan grid-area.
Hasil
Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.
Sebuah grid selebar 800px memakai grid-template-columns: repeat(4, 1fr) dan gap: 20px. Berapa piksel lebar satu kolom?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Apa yang terjadi kalau sebuah elemen anak grid diberi grid-area: sidebar, tetapi nama sidebar tidak ada di grid-template-areas induknya?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Pada grid-template-areas, apa arti satu nama yang ditulis dua kali berturut-turut dalam satu baris?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.
Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0). Rincian perubahan ada di halaman kelas.