Properti kolom-grid CSS
Contoh
Buat "item1" mulai pada kolom 1 dan rentang 2 kolom:
.item1 {
grid-column: 1 / span 2;
}
Definisi dan Penggunaan
Properti grid-column
menentukan ukuran dan lokasi item kisi dalam tata letak kisi, dan merupakan properti singkatan untuk properti berikut:
Nilai bawaan: | mobil / mobil |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | Modul Tata Letak Grid CSS Level 1 |
Sintaks JavaScript: | objek .style.gridColumn="2 / rentang 2" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
Sintaks CSS
grid-column: grid-column-start /
grid-column-end;
Nilai properti
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
Lebih Banyak Contoh
Contoh
Anda dapat menggunakan nilai baris kolom alih-alih jumlah kolom untuk direntangkan:
.item1 {
grid-column: 1 / 3;
}
Halaman Terkait
Tutorial CSS: Tata Letak Kotak CSS