grid-auto-flow
Misol
Avtomatik joylashtiriladigan elementlarni ustunma-ustun joylashtiring:
.grid-container {
display: grid;
grid-auto-flow: column;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
grid-auto-flow xususiyati avtomatik joylashtiriladigan elementlar gridga qanday qo‘yilishini boshqaradi.
| Standart qiymat: | row |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS Grid Layout moduli, 1-daraja |
| JavaScript sintaksisi: | object.style.gridAutoFlow="row dense" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
CSS sintaksisi
grid-auto-flow: row|column|dense|row dense|column dense;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| row | Standart qiymat. Elementlarni har bir qatorni to‘ldirib joylashtiradi | Demo ❯ |
| column | Elementlarni har bir ustunni to‘ldirib joylashtiradi | Demo ❯ |
| dense | Elementlarni griddagi har qanday bo‘sh joyni to‘ldiradigan tarzda joylashtiradi | Demo ❯ |
| row dense | Elementlarni har bir qatorni to‘ldirib joylashtiradi va griddagi har qanday bo‘sh joyni to‘ldiradi | Demo ❯ |
| column dense | Elementlarni har bir ustunni to‘ldirib joylashtiradi va griddagi har qanday bo‘sh joyni to‘ldiradi | Demo ❯ |
Ko‘proq misollar
Misol
"dense" qiymatini qo‘shib, griddagi har qanday bo‘sh joyni to‘ldiring:
.grid-container {
display: grid;
grid-auto-flow: row dense;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS Grid maketi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!