Intrinsic Sizing

Sejauh ini kita menentukan lebar dengan angka: persen, piksel, atau hasil calc(). Cara itu memaksa kita menebak seberapa lebar konten akan tumbuh — dan tebakan selalu berisiko: label tombol diganti, teks diperpanjang, atau font pengguna lebih besar dari perkiraan, lalu layout bergeser. CSS menyediakan kelompok kata kunci lain bernama intrinsic sizing yang bekerja sebaliknya — lebar elemen ditentukan dari kontennya sendiri, bukan dari angka yang kita karang. Tiga kata kunci utamanya adalah max-content, min-content, dan fit-content, dan pada chapter ini kita membandingkan ketiganya pada teks yang sama.

Tiga Kata Kunci dari Konten #

Cara membacanya: max-content adalah keinginan terbesar konten, min-content keinginan terkecilnya, dan fit-content kompromi keduanya — merangkul konten selama ruang masih ada, lalu menyerah pada tepi wadah dan membiarkan teks memenggal seperti biasa.

Perbandingan pada Kalimat yang Sama #

Perbedaan ketiganya paling mudah dipahami lewat satu kalimat panjang yang diberi lebar berbeda:

.kalimat-luas {
  width: max-content;
}

.kalimat-rapat {
  width: min-content;
}

.kalimat-sesuai {
  width: fit-content;
}

Tiga div berisi kalimat yang sama panjang, dipanggungkan di wadah selebar 420 piksel:

Satu kalimat, tiga perilaku. Dari ketiganya, fit-content paling sering menjadi jawaban yang aman karena perilakunya paling dekat dengan keinginan kita sehari-hari: tampil sesuai isi, patuh pada ruang. max-content paling tepat untuk teks pendek yang tidak boleh pecah baris seperti label atau angka statistik, sedangkan min-content adalah alat khusus untuk kolom tabel, galeri, dan layout rapat lain yang memang butuh menyempit seminimal mungkin.

width: fit-content untuk Elemen yang Merangkul Konten #

Kata kunci fit-content adalah yang paling sering terpakai. Badge status, chip, dan tombol sejajar teks ingin lebarnya pas dengan isinya — tidak lebih lebar, tidak lebih sempit:

.badge-status {
  width: fit-content;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: #eef4f0;
  border: 1px solid #9ed2b5;
  font-size: 0.875rem;
}

Demo berikut menyandingkan badge ber-fit-content dengan kotak yang tidak memakainya:

Bila teksnya diganti menjadi lebih panjang, badge menyesuaikan diri tanpa perubahan satu baris kode pun.

Kebiasaan defensif yang baik: sandingkan width: fit-content dengan max-width: 100%. Pasangan ini membuat elemen mengikuti kontennya, tetapi tetap berdiam di dalam wadah bila kontennya ternyata lebih lebar dari ruang yang tersedia — jebakan yang sudah kita lihat pada perilaku max-content.

Intrinsic sizing juga hidup di Grid dalam bentuk fungsinya: fit-content(300px) sebagai ukuran track berarti track selebar konten dengan plafon 300 piksel, dan kata kunci auto pada track pun dihitung dengan logika intrinsic yang sama. Semua ini akan terasa familiar saat kita tiba di section CSS Grid; sementara itu, flex-basis: auto pada Flexbox juga melihat ukuran konten dengan cara serupa.

Kombinasi praktis lainnya adalah menengahkan elemen seperti ini. Margin auto hanya bekerja bila ada sisa ruang, dan width: fit-content menyediakan sisa ruang itu:

.pesan-tengah {
  width: fit-content;
  margin: 0 auto;
}

Kombinasi ini tetap bekerja apa pun teks yang ditulis — ganti kalimatnya, dan posisi tengah tidak bergeser karena lebar selalu dihitung dari konten.

Kesalahan Umum #

Ringkasan #

Intrinsic sizing membalik arah keputusan ukuran: alih-alih menetapkan angka lalu berharap konten muat, kita membiarkan konten yang menyatakan kebutuhannya — max-content tanpa pemenggalan, min-content hingga kata terlebar, dan fit-content yang merangkul konten selama ruang mengizinkan. Gunakan fit-content untuk elemen kecil yang mengikuti isinya, dan waspadai max-content pada teks panjang. Dengan seluruh bekal satuan dan sizing dari section ini, chapter berikutnya menyusun semuanya menjadi peta keputusan: unit mana yang tepat untuk tiap property.