სვეტების გადახურვა CSS ბადეებში
სიტუაციაში, როდესაც რამდენიმე ელემენტი იკავებს ერთსა და იმავე სვეტს, შეიძლება შეინიშნოს მათი გადახურვა, რომლის დროსაც ყოველი მომდევნო ელემენტი გადაინაცვლებს ქვემოთ მდებარე რიგში.
მოდით, ჩვენს ბადეში მივიღოთ ისე, რომ პირველი ელემენტი განთავსდეს პირველ რიგში, მეორე - მეორეში, ხოლო მესამე და მეოთხე - მესამე რიგში:
<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;
}
:
განახორციელეთ შემდეგი მაგალითი:
განახორციელეთ შემდეგი მაგალითი:
განახორციელეთ შემდეგი მაგალითი:
