Auto-fit dan Auto-fill

auto-fill dan auto-fit terlihat seperti dua kata yang dapat dipertukarkan: keduanya meminta browser menghitung sendiri berapa track yang muat dalam wadah, dan keduanya menghasilkan layout yang identik selama jumlah item cukup banyak. Perbedaan keduanya baru muncul ketika item lebih sedikit dari track yang tersedia — dan perbedaan itu cukup besar untuk mengubah lebar kartu dari 150px menjadi 300px. Chapter ini membedah mekanisme pembentukan track pada kedua mode, menunjukkan kapan track kosong dipertahankan dan kapan track kosong di-collapse, serta menyarankan kapan masing-masing pantas dipakai.

Cara Keduanya Membentuk Track #

Kedua kata kunci menjalankan perhitungan yang sama pada tahap pertama. Dengan repeat(auto-fill, minmax(150px, 1fr)) pada wadah 600px, browser menghitung berapa track minimal 150px yang muat: empat track. Kedua mode lalu membuat keempat track itu dan mengisi item dari kiri. Selama keempat track terisi item, hasil keduanya sama persis.

Perbedaan terjadi pada tahap akhir, setelah semua item ditempatkan:

• auto-fill mempertahankan seluruh track hasil hitungan, termasuk yang tidak berisi item. Track kosong tetap menempati ruang sesuai minmax-nya, sehingga item yang ada tidak melebar.
• auto-fit meng-collapse track kosong menjadi berukuran 0px, lalu ruang yang tertinggal dibagikan kembali ke track yang berisi item. Item yang ada ikut melebar.

Dengan dua item pada wadah 600px: auto-fill menyisakan dua track kosong dan item tetap 150px; auto-fit menciutkan track ketiga dan keempat, sehingga dua item saling berbagi 600px dan masing-masing menjadi 300px. Nilai computed grid-template-columns pada mode auto-fit menunjukkan efek ini secara langsung: 300px 300px 0px 0px.

Memilih antara auto-fill dan auto-fit #

Aturan praktisnya: pakai auto-fit bila Anda ingin kisi selalu “mengisi” wadah sepadat mungkin tanpa peduli jumlah item, dan auto-fill bila Anda ingin ukuran kartu tetap stabil seberapa pun banyak itemnya. Bila jumlah item praktis selalu lebih banyak dari kapasitas kisi, keduanya tidak dapat dibedakan — pilih salah satu dan konsisten.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Auto-fit dan Auto-fill</title>
  <style>
    .isi-semua { display: grid; width: 600px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .pas-ruang { display: grid; width: 600px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .isi-semua > div, .pas-ruang > div { border: 1px solid rgb(59, 130, 246); background: rgb(219, 234, 254); }
  </style>
</head>
<body>
  <div class="isi-semua">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
  <div class="pas-ruang">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</body>
</html>

Hasil di Browser:

Kisi auto-fill pada 600px: terbentuk empat track; computed
grid-template-columns "150px 150px 150px 150px". Kedua item menempati
track 1 dan 2, sehingga computed width masing-masing 150px — dua track
kosong tetap menempati ruang di kanan.
Kisi auto-fit dengan dua item yang sama: track 3 dan 4 di-collapse
menjadi 0px, computed grid-template-columns "300px 300px 0px 0px".
Kedua item saling berbagi 600px sehingga computed width 300px.

Mari kita telaah dua deklarasi kuncinya:

1. Baris 7 (repeat(auto-fill, minmax(150px, 1fr))): browser membuat empat track 150px. Item hanya dua, tetapi track tetap empat — kosongnya terlihat sebagai ruang tak berisi, bukan pelebaran item.
2. Baris 10 (repeat(auto-fit, minmax(150px, 1fr))): perhitungan awal sama (empat track), tetapi track 3 dan 4 kosong sehingga di-collapse menjadi 0px. Sisa 300px dibagikan ke dua track terisi, menghasilkan item 300px.

Satu catatan teknis untuk penempatan presisi: track yang di-collapse oleh auto-fit tetap meninggalkan garis kisi, sehingga item yang menunjuk garis tertentu dapat mendarat pada kolom selebar 0px. Bila layout Anda mencampur penempatan otomatis dengan penempatan garis, uji perilakunya atau pilih auto-fill.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi computed grid-template-columns kedua kisi beserta lebar kedua item pada masing-masing mode.