Kolommen samenvoegen in CSS-grids
Op een vergelijkbare manier kun je
kolommen samenvoegen met de eigenschap
grid-column.
Stel dat we een grid hebben met vier elementen. Laten we nu regelen dat het eerste, tweede en derde element in de eerste rij staan. En het vierde element de hele tweede rij inneemt:
<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;
}
:
Plaats alle elementen en voeg de kolommen samen volgens het volgende voorbeeld:
Plaats alle elementen en voeg de kolommen samen volgens het volgende voorbeeld:
Plaats alle elementen en voeg de kolommen samen volgens het volgende voorbeeld:
