grid-auto-columns
Misol
Griddagi ustunlar uchun standart o‘lcham o‘rnating:
.grid-container {
display: grid;
grid-auto-columns: 50px;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
grid-auto-columns xususiyati grid konteynerdagi ustunlar uchun o‘lcham o‘rnatadi.
Bu xususiyat faqat o‘lchami o‘rnatilmagan ustunlarga ta’sir qiladi.
| Standart qiymat: | auto |
|---|---|
| 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.gridAutoColumns="120px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| grid-auto-columns | 57 | 16 | 52 | 10 | 44 |
CSS sintaksisi
grid-auto-columns: auto|max-content|min-content|minmax()|fit-content()|length|%|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| auto | Standart qiymat. Ustunlar o‘lchami konteyner o‘lchamiga qarab aniqlanadi | Demo ❯ |
| max-content | Har bir ustun o‘lchamini ustundagi eng katta elementga qarab o‘rnatadi | Demo ❯ |
| min-content | Har bir ustun o‘lchamini ustundagi eng kichik elementga qarab o‘rnatadi | Demo ❯ |
| minmax() | O‘lcham oralig‘ini belgilaydi: min qiymatdan katta yoki unga teng va max qiymatdan kichik yoki unga teng | |
| fit-content() | Ustunlar o‘lchamini uzunlik yoki % bilan o‘rnatadi: ustun mavjud bo‘sh joydan foydalanadi, lekin hech qachon max-content o‘lchamidan kattalashmaydi | |
| length | Ustunlar o‘lchamini ruxsat etilgan uzunlik qiymati orqali o‘rnatadi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Ustunlar o‘lchamini foiz qiymati orqali o‘rnatadi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS darsligi: CSS Grid maketi
CSS ma’lumotnomasi: grid-auto-rows xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!