Veergude kattumine CSS grid'ides
Olukorras, kus mitu elementi hõivavad sama veeru, võib täheldada nende kattumist, kus iga järgnev element nihutub järgmisele reale.
Teeme oma grid'is nii, et esimene element paikneb esimesel real, teine - teisel real, ning kolmas ja neljas - kolmandal real:
<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;
}
:
Realiseerige järgmine näide:
Realiseerige järgmine näide:
Realiseerige järgmine näide:
