Συγχώνευση στηλών σε CSS πλέγματα

Με παρόμοιο τρόπο μπορείτε να συγχωνεύετε στήλες χρησιμοποιώντας την ιδιότητα grid-column.

Ας υποθέσουμε ότι έχουμε ένα πλέγμα με τέσσερα στοιχεία. Τώρα ας κάνουμε έτσι ώστε το πρώτο, δεύτερο και τρίτο στοιχείο να βρίσκονται στην πρώτη σειρά. Και το τέταρτο στοιχείο να καταλαμβάνει ολόκληρη τη δεύτερη σειρά:

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

Результат: