Ichma-chashma CSS gridlari
Grid tizimida o‘zingiz yaratgan setkaga yangi ichma-chashma grid qo‘shish imkoniyati mavjud. Ichma-chashma gridalar sayt bloklari ichidagi kichik elementlarni joylashtirishda keng qo‘llaniladi.
Ushbu imkoniyatdan foydalanish uchun, farzand elementning o‘zida display xususiyatiga grid qiymatini berish kerak.
Misol uchun, keling gridning biror katagiga yana bir grid yaratamiz:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Faraz qilaylik, sizda uchta ustun bo‘ylab joylashgan beshta elementdan tashkil topgan grid mavjud. Ikkinchi elementda o‘z navbatida uchta farzand elementga ega bo‘lgan ichma-chashma grid yarating.
Oldingi vazifani o‘zgartiring, shunday qilinki ichma-chashma gridda beshta farzand element bo‘lsin.
Birinchi va uchinchi elementlarning har birida uchta farzand elementga ega bo‘lgan ichma-chashma grid yarating.
