grid-template-columns
Misol
4 ustunli grid konteyner yarating:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
grid-template-columns xususiyati grid maketidagi ustunlar sonini (va kengligini) belgilaydi.
Qiymatlar bo‘sh joy bilan ajratilgan ro‘yxat bo‘lib, har bir qiymat tegishli ustunning o‘lchamini belgilaydi.
| Standart qiymat: | none |
|---|---|
| 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.gridTemplateColumns="50px 50px 50px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| grid-template-columns | 57 | 16 | 52 | 10 | 44 |
CSS sintaksisi
grid-template-columns: none|auto|max-content|min-content|minmax()|length|percentage|fit-content()|repeat()|subgrid|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | Standart qiymat. Ustunlar kerak bo‘lganda yaratiladi | Demo ❯ |
| auto | Ustunlar o‘lchami konteyner o‘lchamiga va ustundagi elementlar kontentining o‘lchamiga qarab aniqlanadi | Demo ❯ |
| max-content | Har bir ustun o‘lchamini ustundagi eng katta elementga bog‘liq qilib o‘rnatadi | Demo ❯ |
| min-content | Har bir ustun o‘lchamini ustundagi eng kichik elementga bog‘liq qilib o‘rnatadi | |
| minmax() | O‘lcham oralig‘ini belgilaydi: min qiymatdan katta yoki unga teng va max qiymatdan kichik yoki unga teng | |
| length | Ustunlar o‘lchamini ruxsat etilgan uzunlik qiymati orqali o‘rnatadi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| percentage | Ustunlar o‘lchamini konteynerning inline o‘lchamiga nisbatan foizda o‘rnatadi | |
| fit-content() | Ustunlar o‘lchamini uzunlik yoki % bilan o‘rnatadi: ustun mavjud bo‘sh joydan foydalanadi, lekin hech qachon max-content o‘lchamidan kattalashmaydi | Demo ❯ |
| repeat() | Griddagi ustunlar to‘plamini takrorlaydi | Demo ❯ |
| subgrid | Grid shu o‘qda ota gridning o‘zi egallagan qismini qabul qilishini bildiradi | |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
4 ustunli grid konteyner yarating va har bir ustun uchun o‘lcham belgilang:
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS Grid maketi
CSS ma’lumotnomasi: grid-template-rows xususiyati
CSS ma’lumotnomasi: grid-template xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!