← CSS28 / 62
Membentangkan item dengan span
Item grid bisa menempati lebih dari satu kolom dengan grid-column: span 2. Untuk posisi presisi, pakai nomor garis: grid-column: 1 / 3 berarti dari garis 1 sampai garis 3 (yaitu menutupi 2 kolom). Perhatikan: yang dihitung adalah garis, bukan kolom — sumber kebingungan yang umum. Untuk membentang penuh berapa pun jumlah kolomnya, grid-column: 1 / -1 lebih aman daripada menghitung nomor garis terakhir secara manual.
👀 Contoh dulu
/* grid 4 kolom */
.banner { grid-column: span 3; } /* menutupi 3 kolom */
.penuh { grid-column: 1 / -1; } /* dari awal sampai akhir */Hasilnya: .banner selebar 3 kolom, dan .penuh membentang penuh selebar grid apa pun jumlah kolomnya.
💡 grid-column: 1 / -1 adalah trik berguna: -1 berarti garis terakhir, jadi otomatis selalu penuh.
📝 Sekarang giliranmu
Buat .lebar membentang 2 kolom dengan grid-column: span 2.
Preview