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:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#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;
}

Результат: