Section ini membahas pola layout sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.
Kendalikan lebar isi halaman dengan max-width, margin auto, dan padding-inline — fondasi dari hampir semua layout halaman.
Buka → # Pola: Content WrapperBungkus kolom konten dengan wrapper berbasis ch agar teks nyaman dibaca, dan atur wrapper bertingkat dengan jarak yang konsisten.
Buka → # Pola: Header dan NavigationRakit header halaman utuh: latar penuh lebar, isi terkendali container, dan baris flex yang bertahan di layar sempit.
Buka → # Pola: Hero SectionBangun area pembuka selebar layar: tinggi mengikuti viewport, konten terpusat, latar gradient dengan overlay, plus varian dua kolom.
Buka → # Pola: Sidebar LayoutSusun kerangka halaman utuh dengan header selebar layar, sidebar sticky, dan penumpukan otomatis di layar sempit.
Buka → # Pola: Card GridIsi section halaman dengan deretan kartu responsif: auto-fit minmax, tinggi seragam, dan aksi sejajar di dasar kartu.
Buka → # Pola: Article LayoutSusun kolom baca 65ch dengan gambar yang menembus lebih lebar lewat satu grid dan penempatan kolom.
Buka → # Pola: Split Screen LayoutBagi layar berdua menjadi panel brand dan panel form, lengkap dengan gulir mandiri dan penumpukan mobile.
Buka → # Pola: Sticky NavigationBuat header yang tetap terlihat saat halaman digulir: sticky, latar blur, pemisah border, dan z-index yang tertib.
Buka → # Pola: Dashboard LayoutRakit app shell setinggi viewport: sidebar tetap, header statis, dan area isi yang menggulir dengan min-height: 0.
Buka → # Pola: Footer LayoutSusun footer multi-kolom dengan baris bawah, dan pastikan footer menempel di dasar halaman meski kontennya pendek.
Buka → # Menggabungkan Flexbox dan GridRumuskan pembagian tugas flexbox dan grid, lalu buktikan dengan landing page utuh dalam satu demo komposit.
Buka →