Overlapping Kolom di CSS Grid

Dalam situasi di mana beberapa elemen menempati kolom yang sama, dapat terjadi overlapping, di mana setiap elemen berikutnya bergerak ke baris di bawahnya.

Mari kita dalam grid kita buat agar elemen pertama terletak di baris pertama, elemen kedua - di baris kedua, dan elemen ketiga serta keempat - pada baris ketiga:

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

Результат: