Überlappung von Spalten in CSS Grids

In einer Situation, in der mehrere Elemente dieselbe Spalte einnehmen, kann es zu ihrer Überlappung kommen, wobei jedes nachfolgende Element um eine Zeile nach unten verschoben wird.

Lassen Sie uns in unserem Grid so einrichten, dass das erste Element in der ersten Zeile positioniert wird, das zweite - in der zweiten, und das dritte und vierte - in der dritten Zeile:

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

Результат: