Die kombinasie van kolomme in CSS-roosters
Op 'n soortgelyke manier kan kolomme
gekombineer word met behulp van die eienskap
grid-column.
Laat ons aanneem ons het 'n rooster met vier elemente. Laat ons nou die eerste, tweede en derde elemente in die eerste ry plaas. En laat die vierde element die hele tweede ry beslaan:
<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 / 2;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 3 / 4;
}
#elem4 {
grid-column: 1 / 4;
}
:
Plaas al die elemente en kombineer die kolomme volgens die volgende voorbeeld:
Plaas al die elemente en kombineer die kolomme volgens die volgende voorbeeld:
Plaas al die elemente en kombineer die kolomme volgens die volgende voorbeeld:
