Pola: Content Wrapper

Container dari chapter sebelumnya mengendalikan lebar keseluruhan halaman, tetapi membaca meminta batasan yang berbeda: baris teks yang terlalu panjang membuat mata lelah berpindah dari akhir satu baris ke awal baris berikutnya. Untuk kebutuhan itu kita memakai content wrapper — elemen pembungkus yang tugasnya bukan membatasi halaman, melainkan merapikan satu kolom konten. Pada chapter ini kita membedakan peran container dan wrapper, merakit wrapper pembaca dengan unit ch, menyusun wrapper bertingkat, dan menyiapkan jarak yang konsisten lewat token spacing.

Container vs Wrapper: Dua Peran Berbeda #

Keduanya memakai teknik yang sama — max-width plus margin-inline: auto — tetapi perannya berbeda dalam susunan halaman:

Cara paling mudah membedakannya: container menyatukan ritme horizontal seluruh halaman, sedangkan wrapper menyempitkan satu kolom di dalamnya. Banyak proyek hanya memakai satu kelas untuk keduanya dan itu sah — yang penting satu keputusan dipakai konsisten di seluruh proyek.

Wrapper Pembaca dengan 65ch #

Wrapper untuk kolom baca memakai varian ch dari chapter sebelumnya, lalu ditambah sentuhan tipografi:

.wrapper-baca {
  max-width: 65ch;
  margin-inline: auto;
  line-height: 1.7;
}

.wrapper-baca p + p {
  margin-top: 1.25em;
}

Tiga keputusannya: 65ch menjaga panjang baris di kisaran ideal yang kita bahas pada chapter tipografi; line-height: 1.7 tanpa satuan diwariskan sebagai rasio kepada semua anaknya; dan selektor p + p memberi jarak hanya di antara paragraf, tanpa mengganggu jarak heading pertama. Setiap deklarasi sudah dibahas mendalam di section Typography — di sini kita hanya merangkainya menjadi satu pembungkus.

Wrapper Bertingkat: Halaman dan Teks #

Halaman artikel nyata sering membutuhkan dua lapis sekaligus: pembatas lebar halaman untuk seluruh konten, dan pembatas sempit khusus teks. Struktur HTML-nya:

<body>
  <div class="wrapper-halaman">
    <header>
      <h1 class="judul-artikel">Rahasia Seduhan V60</h1>
    </header>
    <main class="wrapper-baca">
      <p>Paragraf pembuka artikel...</p>
    </main>
  </div>
</body>

Lalu kedua wrapper-nya:

.wrapper-halaman {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.wrapper-baca {
  max-width: 65ch;
  margin-inline: auto;
}

Perhatikan mekanisme penengahannya berlapis: margin-inline: auto pada .wrapper-halaman menengahkan pembatas lebar terhadap viewport, kemudian margin-inline: auto pada .wrapper-baca menengahkan kolom teks terhadap pembatas lebar. Karena 65ch jauh lebih sempit daripada 1080 piksel, tersedia ruang kosong simetris di kiri-kanan kolom teks — ruang kosong itu memang disengaja, bukan layout yang gagal.

Demo berikut memperlihatkan kedua wrapper sekaligus — lapisan halaman berlatar krem dan lapisan kolom baca berlatar putih di dalamnya:

Jarak Konsisten dengan Spacing Token #

Wrapper biasanya menentukan pula ritme vertikal kontennya. Agar nilainya seragam di seluruh halaman, kita pinjam pola spacing variables dari section Custom Properties:

:root {
  --space-4: 16px;
  --space-6: 32px;
  --space-8: 64px;
}

.wrapper-baca {
  max-width: 65ch;
  margin-inline: auto;
  padding-block: var(--space-8);
}

.wrapper-baca p + p {
  margin-top: var(--space-4);
}

Manfaatnya baru terasa ketika proyek membesar: mengubah --space-8 dari 64 piksel menjadi 80 piksel menyesuaikan ritme vertikal semua halaman sekaligus, tanpa mencari nilai 64px satu per satu. Pembahasan lengkap penamaan dan pengorganisasian token menanti di chapter Spacing Variables; untuk sekarang cukup kita biasakan wrapper mengambil jarak dari token, bukan dari angka yang ditulis langsung.

Ringkasan #

Wrapper adalah versi fokus dari container: teknik yang sama, tetapi tujuannya merapikan satu kolom konten agar nyaman dibaca. Kolom 65ch, wrapper bertingkat, dan spacing token adalah tiga perangkat yang membuat kolom baca konsisten di seluruh proyek. Dengan dasar horizontal ini, kita siap naik ke bagian halaman yang paling sering dilihat: header dan navigasinya.