Page Layout Composition

Semua resep pada section ini kini siap dirakit menjadi satu halaman utuh: header sticky di puncak, wadah terpusat berisi grid dua kolom di tengah, dan footer yang menempel di dasar viewport. Prinsip perakitannya satu kalimat: satu resep per lapisan — setiap pola diterapkan pada elemen pembungkusnya sendiri, bukan dirapatkan ke dalam satu grid raksasa. Dengan begitu, mengubah salah satu lapisan tidak pernah merusak lapisan lain.

Menyusun Denah dari Resep yang Sudah Ada #

Struktur HTML-nya adalah tumpukan empat lapisan, dan setiap lapisan membawa satu resep:

<body>
  <header class="topbar">
    <strong>Ruang Tulis</strong>
    <nav>
      <span>Artikel</span>
      <span>Tentang</span>
    </nav>
  </header>
  <div class="wadah">
    <div class="tata">
      <aside class="sisi">
        <h2>Kategori</h2>
        <ul>
          <li>CSS Grid</li>
          <li>Flexbox</li>
          <li>Responsif</li>
        </ul>
      </aside>
      <main class="utama">
        <h1>Merancang Layout yang Tahan Lama</h1>
        <p>Artikel utama berada di kolom lebar...</p>
      </main>
    </div>
  </div>
  <footer class="kaki">
    <p>© 2026 Ruang Tulis</p>
  </footer>
</body>

CSS-nya menggabungkan empat resep tanpa deklarasi yang saling bertumpang-tindih:

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(15, 23, 42);
  color: rgb(241, 245, 249);
}
.wadah {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}
.tata {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding-block: 32px;
}
.kaki {
  background: rgb(15, 23, 42);
  color: rgb(241, 245, 249);
  text-align: center;
  padding: 24px;
}
@media (max-width: 800px) {
  .tata { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { padding: 8px 16px; }
}

Hasil di Browser:

Pada viewport 1280x720: header membawa position: sticky; wadah
terpusat dengan computed max-width 960px dan margin-left 160px;
grid dua kolom di dalamnya menghasilkan aside 240px dan kolom
utama 648px (912 - 240 - 24 gap). Footer menempel di dasar
viewport karena body flex column dan .wadah membawa flex: 1.

Mari kita telaah pembagian tugas antar lapisan:

1. body — resep Footer Layout : kolom flex setinggi 100dvh yang menjadikan footer menempel di dasar viewport.
2. .topbar — resep Sticky Header : menempel di tepi atas saat halaman digulir; karena header tidak menutupi alur, tidak perlu padding kompensasi.
3. .wadah — resep Centered Container ditambah flex: 1 dan width: 100%: area tengah melar menyerap sisa tinggi (footer tetap di dasar), lebar 100% membuat margin auto bekerja deterministik sebelum dibatasi max-width: 960px.
4. .tata — resep Two-column Layout : aside navigasi 240px dan kolom utama 1fr — proporsinya sama dengan resep sidebar, hanya dinyatakan berdampingan dengan wadah terpusat.

Halaman hasil rakitan tetap responsif karena setiap resep membawa media query miliknya sendiri: .tata menumpuk menjadi satu kolom di bawah 800px, dan header memperinggi paddingnya di bawah 640px. Media query per lapisan jauh lebih mudah dirawat daripada satu media query raksasa yang mengatur semua lapisan sekaligus — perubahan breakpoint salah satu resep tidak menyentuh resep lain. Untuk proyek yang terus membesar, pisahkan CSS per lapisan ke dalam cascade layers — @layer base, layout, components — agar urutan menimpa antar resep dikelola secara eksplisit, bukan bergantung pada urutan penulisan.

Sebelum dirakit, setiap resep sudah diuji terpisah oleh harness Course ini; perekat antar lapisan hanya tiga properti — flex: 1, width: 100%, dan z-index — yang tugasnya menyelaraskan lapisan, bukan menata ulang layout.

Peta Resep dan Langkah Berikutnya #

Tiga kolom, galeri kartu, sidebar sticky, dan dashboard dari section ini dapat menggantikan .tata kapan pun kebutuhan halaman berubah — seluruhnya memakai konvensi yang sama. Untuk melatih perakitan end-to-end, kerjakan proyek praktik pada section Proyek , yang membangun halaman lengkap dari resep-resep yang sudah teruji.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi position: sticky pada header, max-width 960px dan margin-left 160px pada wadah, serta lebar 240px dan 648px pada kedua kolom.