Overlappende kolommen in CSS-grids

In een situatie waarin meerdere elementen dezelfde kolom innemen, kan overlapping worden waargenomen, waarbij elk volgend element naar een volgende rij verschuift.

Laten we in ons grid ervoor zorgen dat het eerste element in de eerste rij staat, het tweede - in de tweede, en de derde en vierde - in de derde rij:

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

Результат: