Kolonnu pārklāšanās CSS režģos

Situācijā, kad vairāki elementi aizņem to pašu kolonnu, var novērot to pārklāšanos, kurā katrs nākamais elements tiek pārvietots uz nākamo rindu.

Izveidosim mūsu režģī tā, lai pirmais elements atrastos pirmajā rindā, otrais - otrajā, bet trešais un ceturtais - trešajā rindā:

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

Результат: