CSS Gridda ustunlar soni va kengligi
Grid bilan ishlashni o‘rganishni
biz ustunlar soni va kengligini belgilashdan
boshlaymiz, ular bo‘yicha
voris elementlar joylashadi.
Buning uchun biz
grid-template-columns xususiyatidan foydalanamiz,
bu ota-elementda ko‘rsatiladi va
griddagi voris elementlar egallaydigan
ustunlar soni va kengligini belgilaydi.
Xususiyat qiymatida biz ustunlar kengligini
pikselda ko‘rsatamiz.
Misol
Keling, avval ota-element yaratamiz
va uni grid-konteyner qilamiz.
Faraz qilaylik, bizda div bor, uning ichida
to‘rtta voris element joylashgan. Unga
display xususiyatida grid qiymatini belgilaymiz,
grid-template-columns xususiyatida esa
ikki ustun uchun kenglikni yozamiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling, o‘lchami har xil bo‘lgan to‘rtta ustundan iborat jadval yaratamiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Amaliy vazifalar
Faraz qilaylik, sizda to‘qqizta voris elementi bo‘lgan div bor. Ota-elementni grid-konteyner qiling.
Voris elementlarni kengligi 200px bo‘lgan ikkita
ustunda joylashtiring.
Voris elementlarni kengligi 150px bo‘lgan uchta
ustunda joylashtiring.
Voris elementlarni uchta
ustunda joylashtiring: birinchi kengligi 100px,
ikkinchi 150px, va uchinchi
200px.