Kuunganisha Safu wima kwenye Gridi za CSS

Vivyo hivyo unaweza kuunganisha safu wima kwa kutumia sifa grid-column.

Tuchukulie tuna gridi lenye vipengele vinne. Sasa tufanye ili kipengele cha kwanza, cha pili na cha tatu kiwe katika safu mlalo ya kwanza. Na kipengele cha nne kichukue safu mlalo yote ya pili:

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

Результат: