Fusion de colonnes dans les grilles CSS

De manière similaire, il est possible de fusionner des colonnes en utilisant la propriété grid-column.

Supposons que nous ayons une grille avec quatre éléments. Maintenant, faisons en sorte que les premier, deuxième et troisième éléments se positionnent sur la première ligne. Et que le quatrième élément occupe toute la deuxième ligne :

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

Результат: