Grid konteyneri
CSS Grid konteyneri
Grid konteyner ustunlar va qatorlar shaklida joylashgan bir yoki bir nechta grid elementni o‘z ichiga oladi.
Grid konteynerining barcha bevosita bola elementlari avtomatik ravishda grid elementlariga aylanadi.
Element display xususiyatiga ega bo‘lganda, panjara konteyneriga aylanadi
grid yoki inline-grid ga o‘rnatiladi.
1
2
3
4
5
Display grid xossasi
<div> elementining display xossasi grid yoki inline-grid qilinganda u grid konteynerga aylanadi.
Misol
display: grid’dan blok darajasidagi grid konteyner yaratish uchun foydalaning:
.container {
display: grid;
}
Natija:
1
2
3
4
5
Misol
display: inline-grid’dan inline grid konteyner yaratish uchun foydalaning:
.container {
display: inline-grid;
}
Natija:
1
2
3
4
5
CSS Grid Container xossalari
| Xususiyat | Tavsif |
|---|---|
| align-content | Grid elementlarini konteyner ichida vertikal tekislaydi |
| align-items | Flexbox yoki panjara konteyneridagi elementlar uchun standart hizalanishni belgilaydi |
| display | Elementning ko‘rsatilish xatti-harakatini (render qilish qutisi turini) belgilaydi |
| column-gap | Ustunlar orasidagi bo‘shliqni belgilaydi |
| gap | Qator oralig‘i va ustun bo‘shlig‘i xususiyatlari uchun qisqartma xususiyat |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns va grid-auto-flow xossalari uchun qisqartma (shorthand) xossasi |
| grid-auto-columns | Standart ustun o‘lchamini belgilaydi |
| grid-auto-flow | Avtomatik joylashtirilgan elementlar to‘rga qanday kiritilishini belgilaydi |
| grid-auto-rows | Standart qator o‘lchamini belgilaydi |
| grid-template | To‘r-shablon-stringlar, panjara-shablon-ustunlar va to‘r-maydonlar xususiyatlari uchun stenografiya xususiyati |
| grid-template-areas | Nomlangan panjara elementlaridan foydalangan holda ustunlar va stringlarni qanday ko‘rsatishni belgilaydi |
| grid-template-columns | Ustunlar o‘lchamini va to‘r tartibida nechta ustunni belgilaydi |
| grid-template-rows | To‘r tartibidagi qatorlar o‘lchamini belgilaydi |
| justify-content | Grid elementlarini konteyner ichida gorizontal tekislaydi |
| place-content | Align-content va justify-content xususiyatlari uchun stenografiya xususiyati |
| row-gap | To‘r qatorlari orasidagi bo‘shliqni belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!