Grid Column dan Grid Row

Sampai chapter ini browser menempatkan setiap grid item secara otomatis: item mengalir mengikuti urutan sumber, mengisi sel dari kiri ke kanan, lalu turun ke baris berikutnya. Cara otomatis ini nyaman untuk deretan kartu yang setara, tetapi begitu desain menuntut satu kartu lebih lebar atau lebih tinggi dari kartu lainnya, kita butuh kendali manual. Grid menyediakannya melalui grid-column dan grid-row — dua property yang menempatkan item berdasarkan nomor garis (grid line), bukan nomor kolom. Pada chapter ini kita mempelajari cara membaca garis, menulis penempatan eksplisit, serta kata kunci span dan garis negatif.

Grid Bekerja dengan Garis, Bukan Kotak #

Kunci membaca kedua property ini adalah menghitung garis, bukan sel. Setiap track diapit oleh garis: grid dengan tiga kolom memiliki empat garis kolom — satu garis sebelum kolom pertama, dua garis di antara kolom, dan satu garis setelah kolom terakhir:

text
garis:    1          2          3          4
          |          |          |          |
          +----------+----------+----------+
          | kolom 1  | kolom 2  | kolom 3  |
          +----------+----------+----------+

Penomoran selalu dimulai dari 1. Baris pun bekerja sama: garis 1 berada di atas baris pertama, dan grid dengan dua baris memiliki tiga garis horizontal. Dengan pemetaan ini, “mulai dari garis 1 sampai garis 3” selalu berarti menempati dua track pertama.

Menempatkan Item dengan grid-column dan grid-row #

Nilai kedua property ini ditulis sebagai pasangan garis awal dan garis akhir yang dipisah tanda /:

css
.kartu-unggulan {
  grid-column: 1 / 3; /* dari garis 1 sampai garis 3 = dua kolom */
  grid-row: 1;
}

Demo berikut menyusun lima kartu pada grid tiga kolom dengan tiga teknik penempatan sekaligus:

Mari kita telaah aturannya:

grid-column: 1 / 3: nilai pertama adalah garis awal, nilai kedua garis akhir. Karena garis adalah batas antar track, rentang 1 sampai 3 mencakup dua kolom — bukan tiga.
grid-row: 1: satu angka saja berarti item dimulai dari garis tersebut dan berakhir otomatis di garis berikutnya, sehingga menempati satu baris.
Bentuk longhand: grid-column: 1 / 3 adalah singkatan dari grid-column-start: 1 dan grid-column-end: 3.
Item lain tetap auto placement: sel yang sudah diduduki item eksplisit dilewati, sehingga tidak terjadi penumpukan tanpa sengaja.

Kata Kunci span dan Garis Negatif #

Sering kali kita hanya peduli seberapa lebar itemnya, bukan di garis mana ia duduk. Kata kunci span menjawab kebutuhan itu:

css
.kartu-lebar {
  grid-column: span 2; /* rentang dua track, posisi mengikuti auto placement */
}

.panel-info {
  grid-column: -3 / -1; /* dua track dari sisi kanan */
}

Garis negatif menghitung dari ujung grid: -1 adalah garis paling akhir, -2 garis sebelumnya, dan seterusnya. Kombinasi yang sering dipakai adalah grid-column: 1 / -1, yang membuat item selebar seluruh grid apa pun jumlah kolomnya — pas untuk footer pada grid auto-fit yang jumlah kolomnya berubah-ubah.

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikannya
Membaca `1 / 3` sebagai tiga kolom	Item melebar lebih sedikit dari harapan	Hitung garis: jumlah track = garis akhir − garis awal
Memakai angka 0 sebagai garis	Item terdorong ke luar denah, track implicit muncul	Ingat: penomoran garis dimulai dari 1
Dua item diberi garis yang sama	Kedua item bertumpuk di sel yang sama	Bedakan penempatannya, atau biarkan salah satunya auto placement

Ringkasan #

grid-column dan grid-row memberi kendali penuh atas posisi item dengan menyebut garis awal dan garis akhir; span menyebut rentang tanpa garis, dan garis negatif menghitung dari ujung grid. Menuliskan angka garis untuk setiap wilayah halaman utuh tetap terasa rumit, dan di situlah chapter berikutnya masuk: grid-template-areas mengganti deretan angka dengan nama wilayah yang mudah dibaca.