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:

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 / 4;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 1 / 2;
}
#elem4 {
  grid-column: 3 / 4;
}

Результат: