Pola: Centered Container

Perhatikan beberapa website besar dan satu kesamaan langsung terlihat: kontennya tidak menjalar dari tepi kiri sampai tepi kanan layar, melainkan terkumpul di tengah dengan lebar yang terkendali. Pola ini disebut centered container, dan menjadi fondasi dari hampir semua halaman yang akan kita rakit di section Pola Layout. Meski hanya terdiri dari tiga deklarasi, pola ini menyimpan beberapa keputusan desain yang penting dipahami. Pada chapter ini kita membedah anatomi-nya, mencari tahu mengapa kombinasi width: 90% dan max-width menjadi klasik, lalu menyusun resep lengkap yang siap dipakai ulang di seluruh proyek.

Anatomi Centered Container #

Bentuk paling sederhana dari pola ini adalah satu kelas dengan tiga property:

.container {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}

Kunci pola ini ada pada margin-inline: auto. Nilai auto pada margin sudah kita pelajari di chapter Nilai Auto: browser menghitung sisa ruang pembungkus, lalu membaginya rata ke sisi kiri dan kanan elemen. Tanpa deklarasi ini, container berhenti melebar tetapi tetap menempel di kiri — batasan lebar ada, posisi tengahnya tidak.

Mengapa width: 90% plus max-width #

Selama bertahun-tahun, pola ini ditulis dalam bentuk yang sedikit berbeda:

.container {
  width: 90%;
  max-width: 960px;
  margin-inline: auto;
}

Kombinasi ini bekerja karena dua property saling melengkapi. width: 90% membuat container ikut menyusut ketika viewport menyempit, sehingga selalu ada sela di kedua sisi tanpa perlu media query. max-width: 960px kemudian menutup pertumbuhannya di layar lebar. Nilai 90% bukan patokan baku — 85% sampai 95% sama-sama lazim; yang penting container tidak menempel tepi di layar sedang.

Demo berikut memperlihatkan kedua keadaan itu berdampingan — skala diperkecil agar muat di bingkai:

CSS modern memadatkan kedua property itu menjadi satu baris dengan fungsi min() yang kita pelajari di chapter Fungsi min(), max(), dan clamp():

.container {
  width: min(90%, 960px);
  margin-inline: auto;
  padding-inline: 24px;
}

min() memilih nilai terkecil di antara pilihan-pilihannya, jadi container berperilaku persis sama seperti kombinasi width dan max-width.

Varian ch untuk Kolom Teks #

Untuk kolom teks yang nyaman dibaca, pembatas berbasis piksel kurang tepat karena setiap font punya ukuran huruf berbeda. Unit ch — lebar karakter “0” pada font elemen tersebut — mengukur panjang baris dari sisi yang benar:

.kolom-teks {
  max-width: 65ch;
  margin-inline: auto;
}

Pedoman tipografi yang kita bahas di chapter Membuat Tipografi yang Mudah Dibaca menyarankan 45 sampai 75 karakter per baris; 65ch adalah titik tengah yang aman. Untuk halaman berisi artikel panjang, varian ini biasanya dipadukan dengan wrapper khusus — topik lengkap chapter berikutnya. Demo berikut memperlihatkan container utama dan varian kolom teks di atas satu area halaman:

Resep Lengkap untuk Proyek #

Berikut resep yang siap disalin ke proyek mana pun, memadukan custom properties dan clamp() dari materi yang sudah kita kuasai:

:root {
  --lebar-isi: 960px;
  --jarak-tepi: clamp(16px, 4vw, 32px);
}

.container {
  max-width: var(--lebar-isi);
  margin-inline: auto;
  padding-inline: var(--jarak-tepi);
}

Mari kita telaah keputusannya:

1. --lebar-isi sebagai token: lebar maksimum didefinisikan sekali di :root; halaman lain yang butuh lebar berbeda cukup menimpanya dengan custom property baru, tanpa menyentuh aturan container.
2. clamp(16px, 4vw, 32px) untuk jarak tepi: di layar sempit jarak menyusut sampai 16 piksel, di layar lebar berhenti di 32 piksel — ruang tepi yang mengikuti ukuran layar tanpa media query.
3. box-sizing: border-box dari CSS reset membuat padding-inline terhitung di dalam max-width, sehingga total lebar container tidak pernah melampaui batasnya.

Kesalahan Umum #

Ringkasan #

Centered container adalah titik berangkat semua pola halaman: max-width membatasi lebar, margin-inline: auto menengahkan, dan padding-inline menjaga jarak dari tepi. Varian 65ch melayani kolom teks, dan resep berbasis custom properties membuat pola ini konsisten di seluruh proyek. Chapter berikutnya menambahkan lapisan kedua di atasnya: content wrapper yang khusus membungkus kolom baca.