Grid elementlari
CSS Grid elementlari
To‘r konteynerida bir yoki bir nechta panjara elementi mavjud.
Grid konteynerining barcha bevosita bola elementlari avtomatik ravishda grid elementlariga aylanadi.
Quyida besh grid elementli grid konteyner:
CSS Grid elementlari o‘lchami va birlashishi
Grid elementi bir nechta ustun yoki qator bo‘ylab cho‘zilishi mumkin.
Grid elementning qayerdan boshlanishi va tugashini quyidagi xossalar bilan belgilashimiz mumkin:
grid-column-start— grid element qaysi ustun chizig‘idan boshlanishini belgilaydigrid-column-end— grid element qaysi ustun chizig‘ida tugashini belgilaydigrid-column—grid-column-startvagrid-column-enduchun qisqartma xossasigrid-row-start— grid element qaysi qator chizig‘idan boshlanishini belgilaydigrid-row-end— grid element qaysi qator chizig‘ida tugashini belgilaydigrid-row—grid-row-startvagrid-row-enduchun qisqartma xossasi
Griddagi ustunlar orasidagi chiziqlar ustun chiziqlari (column-lines), qatorlar orasidagi chiziqlar esa qator chiziqlari (row-lines) deb ataladi.
To‘r elementini panjara konteyneriga joylashtirishda biz string raqamlariga murojaat qilishimiz mumkin.
CSS grid-column-start va grid-column-end
grid-column-start xossasi grid elementning qaysi ustun chizig‘idan boshlanishini belgilaydi.
grid-column-end xossasi grid elementning qaysi ustun chizig‘ida tugashini belgilaydi.
Misol
Birinchi grid elementni 1-ustun chizig‘idan boshlab, 3-ustun chizig‘ida tugatish:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Natija:
CSS grid-column xossasi
grid-column xossasi grid-column-startgrid-column-end
Misol
Birinchi grid elementni 1-ustun chizig‘idan boshlab, 2 ustun qamrab olishiga ruxsat berish:
.item1 {
grid-column: 1 / span
2;
}
Natija:
CSS grid-row-start va grid-row-end
grid-row-start xossasi grid elementning qaysi qator chizig‘idan boshlanishini belgilaydi.
grid-row-end xossasi grid elementning qaysi qator chizig‘ida tugashini belgilaydi.
Misol
Birinchi grid elementni 1-qator chizig‘idan boshlab, 3-qator chizig‘ida tugatish:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Natija:
CSS grid-row xossasi
grid-row xossasi grid-row-startgrid-row-end
Misol
Birinchi grid elementni 1-qator chizig‘idan boshlab, 2 qator qamrab olishiga ruxsat berish:
.item1 {
grid-row: 1 / span 2;
}
Natija:
grid-column va grid-row ni birlashtirish
Bu yerda grid elementni ustunlar ham, qatorlar ham qamrab olishi uchun grid-column va grid-row xossalarini ikkalasidan foydalanamiz.
Misol
Birinchi grid elementni 1-ustun chizig‘idan boshlab 2 ustun, hamda 1-qator chizig‘idan boshlab 2 qator qamrab olishiga ruxsat berish:
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
Natija:
CSS Grid Item xossalari
| Xususiyat | Tavsif |
|---|---|
| align-self | Ustun o‘qi bo‘ylab ma’lum bir panjara elementi uchun tarkibni tekislaydi |
| grid-area | grid-row-start, grid-column-start, grid-row-end va grid-column-end xususiyatlari uchun qisqartma (shorthand) xususiyat |
| grid-column | Grid-ustun-boshi va panjara-ustun-oxiri xususiyatlari uchun stenografiya xususiyati |
| grid-column-end | To‘r elementining tugash joyini belgilaydi |
| grid-column-start | To‘r elementini qaerdan boshlash kerakligini belgilaydi |
| grid-row | grid-row-start va grid-row-end xususiyatlari uchun qisqartma (shorthand) xususiyat |
| grid-row-end | To‘r elementining tugash joyini belgilaydi |
| grid-row-start | To‘r elementini qaerdan boshlash kerakligini belgilaydi |
| justify-self | Muayyan panjara elementi uchun tarkibni qator o‘qi bo‘ylab tekislaydi |
| place-self | Align-self va justify-self xususiyatlari uchun qisqartma xususiyat |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!