CSS Gridda ustunlarni birlashtirish
Xuddi shu tarzda
grid-column xususiyati yordamida
ustunlarni birlashtirish mumkin.
Faraz qilaylik, bizda to‘rtta elementli grid mavjud. Endi birinchi, ikkinchi va uchinchi elementlar birinchi qatorda joylashishi, to‘rtinchi element esa butun ikkinchi qatorni egallashi uchun quyidagilarni qilamiz:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 2;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 3 / 4;
}
#elem4 {
grid-column: 1 / 4;
}
:
Barcha elementlarni joylashtiring va ustunlarni quyidagi misolda ko‘rsatilganidek birlashtiring:
Barcha elementlarni joylashtiring va ustunlarni quyidagi misolda ko‘rsatilganidek birlashtiring:
Barcha elementlarni joylashtiring va ustunlarni quyidagi misolda ko‘rsatilganidek birlashtiring:
