Atribut grid-column CSS

Definisi dan penggunaan

Properti grid-column menentukan ukuran dan posisi item di layout grid, dan adalah singkatan dari berbagai properti berikut:

Lihat pula:

Panduan CSS:Layout Grid CSS

Contoh

Contoh 1

Membuat "item1" dimulai di kolom 1 dan melintasi dua kolom:

.item1 {
  grid-column: 1 / span 2;
}

Coba sendiri

Contoh 2

Anda dapat menggunakan nilai garis kolom untuk menggantikan jumlah kolom yang akan dilintasi:

.item1 {
  grid-column: 1 / 3;
}

Coba sendiri

Syarat Bahasa CSS

grid-column: grid-column-start / grid-column-end;

Nilai properti

Nilai Deskripsi
grid-column-start Tentukan dari kolom mana tampilan item dimulai.
grid-column-end Tentukan di garis kolom mana tampilan item berhenti, atau melintasi berapa banyak kolom.

Detil teknis

Nilai standar: auto / auto
Warisan: Tidak
Pembuatan animasi: Dukungan. Lihat pula:Properti yang berhubungan dengan animasi。
Versi: Modul Layout Grid CSS Level 1
Syarat Bahasa JavaScript: object.style.gridColumn="2 / span 2"

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini penuhnya.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44