Banyak layout yang kita bangun ternyata berulang dari pola yang sama. Section ini mengumpulkan resep layout paling umum, dibangun dengan flexbox dan grid, lengkap dengan pertimbangan responsive-nya sehingga dapat langsung diadaptasi.

# Centered Container

Bangun wadah konten terpusat dengan max-width, margin auto, dan padding-inline yang tetap aman di semua ukuran layar.

Buka → # Two-column Layout

Susun dua area berdampingan dengan proporsi fr pada grid, lengkap dengan perilaku collapse ke satu kolom di layar sempit.

Buka → # Three-column Layout

Bagi halaman menjadi tiga kolom sama lebar dengan repeat(3, 1fr) dan kenali variasi holy grail yang mengapit konten dengan dua aside.

Buka → # Card Grid

Bangun galeri kartu responsif dengan repeat(auto-fit, minmax(220px, 1fr)) yang menyesuaikan jumlah kolom tanpa media query.

Buka → # Sidebar Layout

Bangun layout dokumentasi dengan sidebar navigasi tetap lebar 260px dan panel yang menempel (sticky) saat halaman digulir.

Buka → # Sticky Header

Buat header navigasi yang tetap terlihat saat halaman digulir dengan position: sticky dan efek kaca berlapis backdrop-filter.

Buka → # Footer Layout

Dorong footer selalu menempel di dasar viewport dengan flexbox, min-height 100dvh, dan flex: 1 pada area konten utama.

Buka → # Dashboard Layout

Rakit kerangka dashboard dengan grid areas bernama: header penuh, sidebar 240px, dan area konten yang menggulir sendiri.

Buka → # Page Layout Composition

Gabungkan seluruh resep section ini menjadi satu halaman utuh: header sticky, wadah terpusat, dua kolom, dan footer di dasar viewport.

Buka →