GridLesson 314Preview gratis
Mixed Column Layout
Lesson ini bagian dari How To · Semua level
Ringkasan
Mixed column layout menggabungkan beberapa lebar kolom dalam satu halaman, misalnya konten utama lebar dengan sidebar sempit lalu bagian full-width di bawahnya. CSS Grid dengan grid-template-areas memudahkan penamaan area sehingga susunan tetap mudah dibaca dan diubah. Pada layar kecil, semua area dapat ditumpuk menjadi satu kolom.
Poin kunci
- Gunakan grid-template-areas untuk memetakan posisi setiap bagian
- Area dapat memiliki rasio berbeda seperti 2fr untuk utama dan 1fr untuk sidebar
- grid-column: 1 / -1 membuat elemen membentang penuh
- Media query mengubah susunan area menjadi satu kolom di ponsel
- minmax(0, 1fr) membantu mencegah konten panjang memaksa kolom melebar
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.