Menggabungkan Flexbox dan Grid

Section ini dibuka dengan satu kotak terpusat dan digulirkan melalui header, hero, sidebar, kartu, artikel, split screen, sticky navigation, dashboard, hingga footer — dan di sepanjang perjalanan itu dua mesin layout CSS selalu bergantian. Chapter penutup ini merumuskan aturan pembagiannya secara eksplisit, mengulang peta pola yang sudah kita rakit, lalu membuktikan semuanya dengan satu landing page utuh dalam satu demo. Setelah chapter ini, section Proyek menanti untuk menyatukan kosakata layout kita menjadi portofolio.

Aturan Pembagian Tugas #

Aturan pragmatis yang dipakai hampir semua proyek modern:

Grid berpikir dalam baris dan kolom sekaligus, sehingga dia alami untuk kerangka halaman. Flexbox berpikir dalam satu sumbu, sehingga dia alami untuk komponen di dalam kerangka tersebut. Rumus ringkasnya: grid untuk kerangka halaman, flexbox untuk komponen di dalamnya.

Aturan ini bukan tembok, melainkan titik berangkat. Keduanya saling menimpa di beberapa kasus — deretan kartu bisa dibuat dengan flexbox dan wrap, dan split screen bisa dibuat dengan flexbox — jadi pertanyaan akhirnya selalu pragmatis: mana yang butuh deklarasi paling sedikit dan paling mudah dibaca tahun depan? Di seluruh section ini, keputusan tersebut konsisten jatuh pada pola di tabel atas.

Peta Pola Section Ini #

Sebelum menyusun halaman utuh, mari kita ulang sebelas pola yang sudah kita rakit:

Tabel ini juga berfungsi sebagai lembar rujukan cepat: ketika proyek nyata meminta “halaman dengan sidebar”, jawabannya tinggal dicari dan diterapkan.

Anatomi Landing Page Utuh #

Halaman landing yang utuh menyusun pola-pola di atas menjadi tumpukan vertikal. Kerangka HTML-nya:

<body>
  <header class="header-halaman">
    <div class="container header-isi"><!-- flex --></div>
  </header>
  <section class="hero"><!-- flex column, overlay gradient --></section>
  <section class="section-fitur">
    <div class="container">
      <div class="grid-kartu"><!-- grid auto-fit --></div>
    </div>
  </section>
  <footer class="footer-situs"><!-- grid + flex, margin-top: auto --></footer>
</body>

Perhatikan pembagian mesinnya pada setiap tingkat — hanya inti tiap komponen yang ditulis di sini:

.header-isi { display: flex; align-items: center; gap: 24px; }
.hero { display: flex; flex-direction: column; justify-content: center; }
.grid-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-utama { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-bawah { display: flex; justify-content: space-between; }

Strukturnya memuat tiga keputusan komposisi yang patut dicatat. Pertama, .container dipasang pada tingkat yang berbeda-beda: di dalam header, di dalam section fitur — di mana pun isi harus terkendali. Kedua, hero tidak memakai container di contoh ini karena kontennya sendiri sudah terpusat dan sempit; varian dengan teks rata kiri akan memakainya. Ketiga, seluruh halaman bisa dibungkus pola halaman flex dari chapter footer bila halaman pendek dan footer harus setia di dasar. Demo berikut adalah seluruh section ini dalam satu halaman. Perhatikan setiap wilayah dan tebak pola yang bekerja di baliknya:

Ringkasan #

Pembagian tugasnya kini tegas: grid menyusun kerangka halaman dalam dua dimensi, flexbox menata komponen satu dimensi di dalamnya, dan keputusan akhir selalu jatuh pada deklarasi yang paling sedikit dan paling jelas. Sebelas pola di section ini adalah kosakata siap pakai untuk halaman mana pun, dan landing page di atas membuktikan mereka saling menyambung. Di section Proyek, kita akan merakit halaman-halaman lengkap dari nol menggunakan seluruh kosakata course ini — dari fondasi CSS hingga pola layout terakhir ini.