CSS Gridda ustunlarni qoplash
Bir nechta elementlar bir xil ustunni egallagan vaziyatda ularning qoplanishi kuzatilishi mumkin, bunda har bir keyingi element pastki qatorga siljiydi.
Keling, bizning gridimizda shunday qilaylik, birinchi element birinchi qatorda, ikkinchi element - ikkinchi qatorda, uchinchi va to'rtinchi elementlar esa uchinchi qatorda joylashsin:
<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 / 4;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 1 / 2;
}
#elem4 {
grid-column: 3 / 4;
}
:
Quyidagi misolni amalga oshiring:
Quyidagi misolni amalga oshiring:
Quyidagi misolni amalga oshiring:
