property grid-column CSS

Definisi dan penggunaan

Atribut grid-column menentukan saiz objek grid serta posisinya dalam susun atasan grid, dan ia adalah singkatan bagi berbagai atribut berikut:

Lihat juga:

Panduan CSS:Susun Atas 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 garisan kolom untuk menggantikan jumlah kolom yang akan dilintasi:

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

Coba sendiri

Syarat CSS

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

Nilai atribut

Nilai Penerangan
grid-column-start Tentukan dari mana objek akan dipaparkan mulai.
grid-column-end Tentukan di mana objek akan berhenti dipaparkan di garisan kolom (column-line) atau melintasi berapa banyak kolom.

Rangkaian teknologi

Nilai lalai: auto / auto
Warisan: Tidak
Pembuatan animasi: Dipakai. Lihat:Atribut animasi。
Versi: Modul Susun Atas Grid CSS Level 1
Syarat JavaScript: object.style.gridColumn="2 / span 2"

Pembiayaan pereka

Bilangan di dalam tabel menunjukkan versi pereka paling awal yang menolong sifat ini.

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