Fungsi minmax()

Track piksel terlalu kaku saat layar menyempit, sedangkan fr murni terlalu lunak ketika kontennya panjang. Fungsi minmax(min, max) mengisi tengahnya: setiap track menerima nilai minimum yang dijamin dan nilai maksimum yang boleh dicapai, lalu browser menyesuaikannya di antara keduanya. Kombinasi jaminan plus kelenturan inilah yang membuat minmax() muncul di hampir semua grid profesional. Chapter ini membahas cara kerjanya, pola sidebar yang paling populer, dan rekap mendalam minmax(0, 1fr) dari chapter Satuan fr.

Bentuk dan Cara Kerja #

minmax() menerima dua argumen: ukuran minimum dan ukuran maksimum sebuah track.

.grid-artikel {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 300px;
  gap: 16px;
}

Cara browser menyelesaikan track minmax(200px, 1fr) pada container 900 piksel:

1. Track tetap dipotong lebih dulu: kolom kanan 300 piksel dan gap 16 piksel meninggalkan 584 piksel ruang bebas.
2. Nilai maksimum menang bila ruang cukup: 1fr mengambil seluruh ruang bebas tersebut.
3. Nilai minimum menang bila ruang tipis: jika container menyusut hingga sisa ruang kurang dari 200 piksel, track pertama tetap dijaga 200 piksel — konten samping tidak pernah tersingkir.

Demo berikut menunjukkan efeknya:

Perhatikan konsekuensinya: minimum adalah janji yang pasti ditepati, sehingga bila container lebih kecil dari total minimum semua track, grid meluap dan scroll mendatar muncul.

Tabel nilai yang valid untuk kedua argumen:

Pola Sidebar: minmax(180px, 240px) #

Pola paling terkenal dari minmax() adalah sidebar yang ikut beradaptasi pada layar lebar tanpa ikut tumbuh tak terkendali:

.grid-halaman {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 24px;
}

Mekanismenya: saat ruang bebas tersedia, track sidebar meregang terlebih dahulu dari 180 hingga mencapai 240 piksel; kelebihan ruang setelah itu seluruhnya jatuh ke kolom 1fr. Batas atas 240 piksel bukan angka sembarangan — menu navigasi yang terlalu lebar justru sulit dipindai mata. Bandingkan dengan sidebar tetap 240px: di layar sempit versi minmax() menyusut hingga 180 piksel dan memberi ruang lebih longgar pada konten utama.

Demo berikut memakai pola tersebut pada wrapper selebar 560 piksel, dengan sidebar minmax(140px, 200px) dan konten utama 1fr:

Perhatikan bahwa sidebar tetap dijamin batas minimumnya meski ruang makin sempit — itulah makna kata “minimum”.

minmax(0, 1fr) dalam Perspektif #

Sekarang resep dari chapter Satuan fr terbaca utuh. Deklarasi 1fr adalah singkatan dari minmax(auto, 1fr), dan auto sebagai minimum berarti track tidak boleh lebih kecil dari kontennya. Tiga bentuk berikut punya karakter berbeda:

Konten yang tidak bisa di-wrap — blok kode panjang, tabel lebar, gambar besar — adalah penyebab klasik kolom 1fr menolak menyusut. Saat mendesain panel yang menampung konten tak terduga, minmax(0, 1fr) adalah pilihan bawaan yang aman; minimum konten justru kita inginkan hanya ketika kolom memang tidak boleh lebih sempit dari teks terpanjangnya.

Ringkasan #

minmax(min, max) memberi setiap track lantai dan langit-langit: minimum selalu ditepati, maksimum membatasi pertumbuhan, dan browser bergerak di antaranya sesuai ruang yang ada. Pola minmax(180px, 240px) 1fr adalah resep sidebar yang beradaptasi dengan sopan, dan minmax(0, 1fr) adalah bentuk fr yang patuh pada pembagian tanpa memedulikan konten lebar. Fungsi ini belum lengkap tanpa satu pasangan kata kunci yang menghitung jumlah pengulangan secara otomatis — auto-fill dan auto-fit, topik chapter berikutnya.