Oorvleueling van kolomme in CSS-roosters
In 'n situasie waar verskeie elemente dieselfde kolom beset, kan hulle oorvleueling waargeneem word, waar elke daaropvolgende element na 'n ry onder geskuif word.
Kom ons maak in ons rooster sodat die eerste element in die eerste ry plaasgevind word, die tweede - in die tweede ry, en die derde en vierde - in die derde ry:
<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;
}
:
Implementeer die volgende voorbeeld:
Implementeer die volgende voorbeeld:
Implementeer die volgende voorbeeld:
