Fluid Layout

Media query yang terlalu sering dipakai adalah tanda layout kita belum fluid. Idealnya, elemen menyesuaikan diri secara halus terhadap ruang yang tersedia — mengembang sedikit saat layar melebar, menyusut saat menyempit — tanpa menunggu perintah dari media query. Chapter ini membahas fondasi penyesuaian itu: lebar relatif berbasis persen dan pola container yang menjadi kerangka hampir setiap halaman modern.

Dari Piksel Tetap ke Lebar Relatif #

Cara lama menulis layout adalah mengunci lebar dalam piksel:

.kontainer-tetap {
  width: 960px; /* lebar tetap */
}

Hasilnya di layar yang lebih sempit dari 960px: konten meluber melewati tepi layar dan muncul scroll horizontal. Di layar yang lebih lebar: konten berhenti di 960px dan sisanya menjadi ruang kosong yang menganggur. Satu angka tetap tidak mungkin cocok untuk rentang layar yang kita hadapi.

Solusinya adalah lebar relatif. Satuan persen selalu dihitung dari lebar elemen induk, bukan dari layar:

.konten-utama {
  width: 66%;
}
.kolom-samping {
  width: 30%;
}

Persentase baru bermasalah bila totalnya melebihi 100%, jadi hitung porsinya dengan cermat dan sisakan ruang untuk gap.

Pola Container max-width #

Layout yang seluruhnya fluid juga punya kelemahan: pada monitor lebar, baris teks menjadi terlalu panjang untuk dibaca nyaman. Solusi standarnya adalah pola container — wadah yang fluid di layar sempit, tetapi berhenti mengembang di batas tertentu dan menengahkan diri:

.kontainer-halaman {
  max-width: 70rem;       /* 1120px pada font root 16px */
  margin-inline: auto;    /* menengahkan saat layar lebih lebar */
  padding-inline: 1.5rem; /* jarak dari tepi saat layar sempit */
}

Demo berikut memakai pola container itu bersama kedua kolom persen dari section sebelumnya — bingkai putus-putus menandai batas container:

Mari kita bedah tiga deklarasinya:

1. max-width: 70rem: lebar boleh mengembang mengikuti ruang, tetapi tidak melewati 70rem. Nilai dalam rem mengikuti preferensi ukuran font pengguna, sehingga konten yang diskalakan untuk mata yang butuh huruf besar tetap proporsional.
2. margin-inline: auto: ketika lebar layar melebihi max-width, sisa ruang dibagi rata ke kiri dan kanan, sehingga konten berada di tengah — bukan menempel di tepi kiri.
3. padding-inline: 1.5rem: di layar sempit, wadah memenuhi lebar penuh dan padding-lah yang menjaga konten tidak menempel ke tepi layar.

Polanya selalu sama: max-width + margin-inline: auto + padding-inline. Hampir setiap framework CSS modern memakai pola ini untuk container-nya, dan kita akan memakainya terus-menerus di section ini.

Fluid, Fixed, atau Adaptive #

Untuk melihat posisi fluid layout, bandingkan tiga pendekatan lebar halaman ini:

Pendekatan yang kita pakai hari ini adalah fluid sebagai dasar, dengan beberapa breakpoint di titik-titik yang benar-benar membutuhkan perubahan struktur. Fluid layout menangani 90% penyesuaian secara otomatis; media query hanya masuk ketika susunan elemen harus berubah.

Ringkasan #

Fluid layout memakai satuan relatif — persen terhadap induk, rem terhadap root — sehingga elemen menyesuaikan diri secara berkelanjutan, bukan melompat antar ukuran tetap. Pola container max-width + margin-inline: auto + padding-inline memberi batas atas yang nyaman dibaca sekaligus jarak aman di layar sempit. Fluid menangani penyesuaian kecil; untuk perubahan struktur yang lebih besar kita perlu alat bersyarat — media queries, topik chapter berikutnya.