grid-template-rows
Misol
Qator o‘lchamini (balandligini) belgilang:
.grid-container {
display: grid;
grid-template-rows: 100px 300px;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
grid-template-rows xususiyati grid maketidagi qatorlar sonini (va balandligini) belgilaydi.
Qiymatlar bo‘sh joy bilan ajratilgan ro‘yxat bo‘lib, har bir qiymat tegishli qatorning balandligini 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.gridTemplateRows="50px 200px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| grid-template-rows | 57 | 16 | 52 | 10 | 44 |
CSS sintaksisi
grid-template-rows: none|auto|max-content|min-content|minmax()|length|percentage|fit-content()|repeat()|subgrid|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | O‘lcham o‘rnatilmaydi. Qatorlar kerak bo‘lganda yaratiladi | Demo ❯ |
| auto | Qatorlar o‘lchami konteyner o‘lchamiga va qatordagi elementlar kontentining o‘lchamiga qarab aniqlanadi | Demo ❯ |
| fit-content() | Qatorlar o‘lchamini uzunlik yoki % bilan o‘rnatadi: qator mavjud bo‘sh joydan foydalanadi, lekin hech qachon max-content o‘lchamidan kattalashmaydi | |
| max-content | Har bir qator o‘lchamini qatordagi eng katta elementga bog‘liq qilib o‘rnatadi | |
| min-content | Har bir qator o‘lchamini qatordagi 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 | Qatorlar o‘lchamini ruxsat etilgan uzunlik qiymati orqali o‘rnatadi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| percentage | Qatorlar o‘lchamini konteynerning inline o‘lchamiga nisbatan foizda o‘rnatadi | |
| repeat() | Griddagi qatorlar 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 | |
Tegishli sahifalar
CSS darsligi: CSS Grid maketi
CSS ma’lumotnomasi: grid-columns xususiyati
CSS ma’lumotnomasi: grid-template xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!