W3.CSS Grid
Grid maketi
CSS Grid — kontentni qator va ustunlarga joylashtirish uchun mo‘ljallangan maket tizimi.
W3.CSS’ning w3-grid klassi CSS Grid maketlarini yaratishni osonlashtiradi.
w3-grid klassi
w3-grid klassi grid konteyner yaratadi.
Grid konteynerning ichki elementlari (children) avtomatik ravishda grid elementlarga (grid items) aylanadi.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Misol
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
<div class="w3-container w3-blue"><h3>4</h3></div>
<div class="w3-container w3-blue"><h3>5</h3></div>
<div class="w3-container w3-blue"><h3>6</h3></div>
</div>
O‘zingiz sinab ko‘ring »
Eslatma
w3-grid klassi grid konteynerni yaratadi.
CSS uslub xususiyatlari grid elementlarining ustunlari, qatorlari, oraliqlari va joylashuvini belgilaydi.
Grid ustunlari
CSS’ning grid-template-columns xususiyati grid’dagi ustunlarni belgilaydi.
1
2
3
Quyidagi misol uchta teng ustun yaratadi:
Misol
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-light-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
</div>
O‘zingiz sinab ko‘ring »
fr birligi
fr birligi mavjud bo‘sh joyning ulushini (fraction) ifodalaydi.
Uchta 1fr ustunning kengligi bir xil:
grid-template-columns: 1fr 1fr 1fr;
Bir ustunni boshqasidan kengroq qilish ham mumkin:
1fr
2fr
Misol
<div class="w3-grid" style="grid-template-columns:1fr 2fr">
<div class="w3-container w3-blue"><p>1fr</p></div>
<div class="w3-container w3-light-blue"><p>2fr</p></div>
</div>
O‘zingiz sinab ko‘ring »
repeat() funksiyasi
CSS’ning repeat() funksiyasi takrorlanuvchi ustunlarni yozishni osonlashtiradi.
Ushbu yozuv o‘rniga:
grid-template-columns: 1fr 1fr 1fr 1fr;
Quyidagicha yozishingiz mumkin:
grid-template-columns: repeat(4, 1fr);
1
2
3
4
Misol
<div class="w3-grid" style="grid-template-columns:repeat(4,1fr)">
<div class="w3-container w3-blue"><p>1</p></div>
<div class="w3-container w3-blue"><p>2</p></div>
<div class="w3-container w3-blue"><p>3</p></div>
<div class="w3-container w3-blue"><p>4</p></div>
</div>
O‘zingiz sinab ko‘ring »
Grid oraliqlari
CSS’ning gap xususiyati grid elementlari orasiga bo‘shliq qo‘shadi.
1
2
3
Misol
<div class="w3-grid" style="grid-template-columns:repeat(3,1fr);gap:16px">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan grid
CSS Grid mavjud kenglik o‘zgarganda ustunlar sonini avtomatik ravishda o‘zgartira oladi.
Quyidagi grid har bir ustun kamida 200 piksel kenglikda bo‘lishi sharti bilan sig‘adigan miqdorda ustun yaratadi:
London
England
Paris
France
Rome
Italy
Misol
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px">
<div class="w3-container w3-card">London</div>
<div class="w3-container w3-card">Paris</div>
<div class="w3-container w3-card">Rome</div>
</div>
O‘zingiz sinab ko‘ring »
Ustunlar soni avtomatik o‘zgarishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.
Bir nechta ustunni egallash
Grid elementi bittadan ortiq ustunni egallashi mumkin.
2 ustun
1 ustun
1 ustun
1 ustun
1 ustun
Misol
<div class="w3-grid" style="grid-template-columns:repeat(3,1fr);gap:8px">
<div style="grid-column:span 2">Spans 2 columns</div>
<div>1 column</div>
<div>1 column</div>
<div>1 column</div>
</div>
O‘zingiz sinab ko‘ring »
Sahifa maketini yaratish
Grid to‘liq sahifa maketlarini yaratish uchun qulay.
Misol
<div class="w3-grid" style="grid-template-columns:150px 1fr;gap:16px">
Birinchi ustun 150px, ikkinchisi (1fr) esa qolgan qism.
Menu
Home
Products
Contact
Main Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Misol
<div class="w3-grid" style="grid-template-columns:150px 1fr;gap:16px">
<div class="w3-container w3-light-grey">
Menu
</div>
<div class="w3-container">
Main Content
</div>
</div>
O‘zingiz sinab ko‘ring »
Grid va Flexbox
Grid ham, Flexbox ham zamonaviy CSS maket tizimlaridir.
| Maket | Eng mos holatlar |
|---|---|
| Grid | Qatorlar va ustunlar |
| Flexbox | Qator yoki ustun |
Maket ikki o‘lchamda ishlashi kerak bo‘lganda Grid’dan foydalaning.
Elementlarni asosan bir yo‘nalishda joylashtirish kerak bo‘lganda Flexbox’dan foydalaning.
grid-template-columns xususiyati
grid-template-columns xususiyati grid’dagi ustunlar sonini va har bir ustunning kengligini belgilaydi.
Qiymatlar auto (avtomatik), fr (ulushlar), px (piksellar), % (foizlar), repeat() yoki ularning istalgan kombinatsiyasi bo‘lishi mumkin.
Misollar
<div class="w3-grid" style="grid-template-columns:auto auto auto">
<div class="w3-grid" style="grid-template-columns:1fr 2fr">
<div class="w3-grid" style="grid-template-columns:150px auto">
<div class="w3-grid" style="grid-template-columns:25% auto">
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
grid-template-rows xususiyati
grid-template-rows xususiyati grid’dagi qatorlar sonini va har bir qatorning balandligini belgilaydi.
Qiymatlar auto, px (piksellar) yoki % (foizlar) bo‘lishi mumkin.
Grid sohalari
Murakkabroq sahifa maketlari uchun nomlangan grid sohalaridan foydalanish mumkin.
"header header" birinchi qatorda ikkita ustun borligini, lekin header ikkalasini ham egallashini bildiradi.
"nav main" ikkinchi qatorning birinchi ustunida nav, ikkinchisida esa main joylashishini bildiradi.
"footer footer" uchinchi qatorda ikkita ustun borligini, lekin footer ikkalasini ham egallashini bildiradi.
CSS Grid xususiyatlari
w3-grid klassi CSS Grid konteynerini yaratadi.
So‘ngra grid’ni boshqarish uchun standart CSS Grid xususiyatlaridan foydalanish mumkin:
| Xususiyat | Tavsif |
|---|---|
| grid-template-columns | Grid ustunlarini belgilaydi |
| grid-template-rows | Grid qatorlarini belgilaydi |
| grid-template | Grid qatorlari, ustunlari va sohalarini belgilaydi |
| grid-template-areas | Nomlangan grid sohalarini belgilaydi |
| gap | Qatorlar va ustunlar orasidagi oraliqlarni belgilaydi |
| row-gap | Qatorlar orasidagi oraliqlarni belgilaydi |
| column-gap | Ustunlar orasidagi oraliqlarni belgilaydi |
| grid-column | Element gorizontal bo‘yicha qayerda boshlanib, qayerda tugashini belgilaydi |
| grid-row | Element vertikal bo‘yicha qayerda boshlanib, qayerda tugashini belgilaydi |
| justify-content | Grid’ni gorizontal tekislaydi |
| align-content | Grid’ni vertikal tekislaydi |
| grid-auto-rows | Avtomatik yaratilgan qatorlar o‘lchamini belgilaydi |
| grid-auto-columns | Avtomatik yaratilgan ustunlar o‘lchamini belgilaydi |
CSS Grid xususiyatlarining to‘liq tavsifini CSS Grid darsligida ko‘ring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!