GridLesson 309Preview gratis
2 Column Layout
Lesson ini bagian dari How To · Semua level
Ringkasan
Tata letak dua kolom membagi area konten menjadi dua bagian berdampingan, misalnya artikel utama dan sidebar. Cara modern yang paling mudah adalah CSS Grid dengan grid-template-columns, atau Flexbox dengan flex-basis. Pada layar kecil, kolom biasanya ditumpuk menjadi satu agar teks tetap nyaman dibaca.
Poin kunci
- CSS Grid dua kolom dapat dibuat dengan grid-template-columns: 2fr 1fr
- Flexbox memakai display: flex dan properti flex pada anak kolom
- Properti gap mengatur jarak antarkolom tanpa margin tambahan
- Media query menumpuk kolom saat lebar layar kecil
- Float masih ada di kode lama, tetapi memerlukan clearfix
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.