Sammanfogning av kolumner i CSS-grid
På ett liknande sätt kan man sammanfoga
kolumner med egenskapen
grid-column.
Låt oss säga att vi har ett grid med fyra element. Nu ska vi göra så att det första, andra och tredje elementet placeras på första raden. Och det fjärde elementet tar upp hela den andra raden:
<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;
}
:
Placera alla element och sammanfoga kolumnerna i enlighet med följande exempel:
Placera alla element och sammanfoga kolumnerna i enlighet med följande exempel:
Placera alla element och sammanfoga kolumnerna i enlighet med följande exempel:
