← CSS25 / 62

grid-template-columns dan unit fr

display: grid + grid-template-columns mendefinisikan kolom secara eksplisit. Unit fr (fraction) berarti bagian dari ruang tersisa: 1fr 1fr 1fr = tiga kolom sama lebar. Keunggulan fr atas persen: ia sudah memperhitungkan gap, jadi tidak ada lagi hitungan 33.33% yang meleset.

👀 Contoh dulu

.papan {
  display: grid;
  grid-template-columns: 200px 1fr;  /* kolom 1 tetap, kolom 2 sisanya */
  gap: 16px;
}

Hasilnya: Dua kolom: yang pertama selalu 200px, yang kedua melebar mengisi ruang tersisa. Item otomatis mengisi kolom berurutan.

💡 1fr = 1 bagian dari ruang SISA (setelah kolom tetap dan gap dikurangi). Karena itu tidak pernah meluber.

📝 Sekarang giliranmu

Buat .grid dengan display: grid, tiga kolom sama lebar (grid-template-columns: 1fr 1fr 1fr), dan gap: 10px.

Preview
← SebelumnyaBerikutnya →