Stulpelių persidengimas CSS grid'uose
Situacijoje, kai keli elementai užima tą patį stulpelį, gali būti stebimas jų persidengimas, kai kiekvienas paskesnis elementas perstumiamas viena eilute žemiau.
Padarykime, kad mūsų grid'e pirmasis elementas būtų įrengtas pirmoje eilėje, antrasis - antroje, o trečiasis ir ketvirtasis - trečioje eilėje:
<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;
}
:
Implementuokite šį pavyzdį:
Implementuokite šį pavyzdį:
Implementuokite šį pavyzdį:
