CSS-ში ქვებადები
ქვებადი არის ჩადგმული ბადის ვარიაცია,
მაგრამ მისგან განსხვავებით ის გავლენას ახდენს
მშობელი ბადე-კონტეინერის ზომაზე.
ქვებადის დასაყენებლად საჭიროა
თვითონ შვილობილ ელემენტში დავსვათ თვისება
display subgrid მნიშვნელობით.
მაგალითისთვის მოდით შევქმნათ მეოთხე ელემენტში ჩადგმული ბადე:
<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: subgrid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 5px;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
დაე, თქვენ გაქვთ ბადე, რომელიც შედგება ხუთი ელემენტისგან, განლაგებული ორ სვეტში. შექმენით მესამე ელემენტში ჩადგმული ბადე, რომელშიც თავის მხრივ იქნება ორი შვილობილი ელემენტი.
შეცვალეთ წინა ამოცანა ისე, რომ ჩადგმულ ბადეში იყოს ოთხი შვილობილი ელემენტი.
შექმენით ორი ჩადგმული ბადე - მეორე ელემენტში და მეხუთე ელემენტებში.
