Grid Template Columns

grid-template-columns adalah properti Grid yang paling sering kita tulis: properti ini mendefinisikan berapa banyak kolom dan seberapa lebar masing-masing. Satu deklarasi berisi daftar ukuran yang dipisah spasi, dan setiap nilai menciptakan satu kolom track. Chapter ini membahas cara menuliskan daftar tersebut, mencampur unit di dalamnya, dan bagaimana item mengisi kolom yang sudah terbentuk.

Satu Nilai, Satu Kolom #

Aturan dasarnya sederhana: jumlah nilai pada grid-template-columns menentukan jumlah kolom, dan tiap nilai menentukan lebar kolomnya.

.papan-harga {
  display: grid;
  grid-template-columns: 150px 250px 150px;
}

Mari kita telaah deklarasinya:

1. grid-template-columns menerima daftar track sizes yang dipisah spasi. Urutan nilai = urutan kolom dari kiri ke kanan.
2. 150px menciptakan kolom pertama selebar 150 piksel.
3. 250px menciptakan kolom tengah — sengaja lebih lebar untuk menampung konten utama.
4. 150px menciptakan kolom ketiga, simetris dengan kolom pertama.

Demo berikut menunjukkan efeknya:

Tanpa grid-template-rows, barisnya tingginya mengikuti konten — perilaku auto yang kita dalami di chapter berikutnya.

Tanpa deklarasi ini sama sekali, grid hanya memiliki satu kolom: semua item bertumpuk vertikal seperti block biasa, hanya saja tetap menjadi grid item dengan semua perilaku perataannya.

Mencampur Unit dalam Satu Daftar #

Setiap track boleh memakai unit yang berbeda — inilah salah satu kekuatan daftar track:

.papan-laporan {
  display: grid;
  grid-template-columns: 64px auto 30%;
}

Demo berikut memakai tiga kolom berukuran campuran; kartu di kolom auto ikut melebar mengikuti nama produk terpanjang:

Coba bandingkan dengan 64px 30% auto — urutan nilai menentukan posisi tiap perilaku. Ubah teks nama produk pada kartu tengah dan lebar kolom auto langsung menyesuaikan.

Item Mengisi Sel Sesuai Urutan #

Sejauh ini kita tidak pernah menyuruh item ke posisi tertentu — dan memang tidak perlu untuk kisi sederhana. Mekanisme auto-placement menempatkan item berurutan dari kiri ke kanan, lalu pindah ke baris berikutnya ketika kolom habis, persis seperti membaca teks. Aturan praktisnya:

• Item diisi mengikuti urutan markup HTML.
• Kolom yang tersedia ditentukan grid-template-columns.
• Baris tambahan dibuat otomatis ketika item lebih banyak dari sel yang tersedia.

Kendali penuh — “taruh kartu ini dari kolom 2 sampai 4” — kita pelajari pada properti grid-column dan grid-row di bagian kedua section.

Kesalahan Umum #

Tiga keluhan yang paling sering muncul saat pertama menulis daftar track:

Dari ketiganya, yang pertama paling sering: kebiasaan dari properti lain yang memakai daftar berkoma, seperti font-family, ikut terbawa ke daftar track.

Ringkasan #

grid-template-columns mendefinisikan grid melalui daftar ukuran: jumlah nilai = jumlah kolom, dan tiap nilai menerima unit sendiri, dari px yang tetap hingga auto yang mengikuti konten. Item mengisi sel secara berurutan lewat auto-placement, dan baris ekstra terbentuk otomatis saat kolom habis. Grid baru kita baru punya kolom — tinggi barisnya masih mengikuti konten; chapter berikutnya mengatur sisi vertikalnya lewat grid-template-rows.