Properti aliran otomatis grid CSS
Contoh
Masukkan item yang ditempatkan secara otomatis kolom demi kolom:
.grid-container {
display: grid;
grid-auto-flow:
column;
}
Definisi dan Penggunaan
Properti grid-auto-flow
mengontrol bagaimana item yang ditempatkan secara otomatis dimasukkan ke dalam kisi.
Nilai bawaan: | baris |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | Modul Tata Letak Grid CSS Level 1 |
Sintaks JavaScript: | objek .style.gridAutoFlow="baris padat" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
Sintaks CSS
grid-auto-flow:
row|column|dense|row dense|column dense;
Nilai properti
Value | Description | Play it |
---|---|---|
row | Default value. Places items by filling each row | |
column | Places items by filling each column | |
dense | Place items to fill any holes in the grid | |
row dense | Places items by filling each row, and fill any holes in the grid | |
column dense | Places items by filling each column, and fill any holes in the grid |
Lebih Banyak Contoh
Contoh
Isi lubang apa pun di kisi dengan menambahkan nilai "padat":
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
Halaman Terkait
Tutorial CSS: Tata Letak Kotak CSS