Demo: CSS grid-column-end

<div class='grid-container'>
  <div class='item1'>Item 1</div>
  <div class='item2'>Item 2</div>
  <div class='item3'>Item 3</div>
  <div class='item4'>Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item1 {
  background-color: lightcoral;
  grid-column-end: span 2;
}

.item2 {
  background-color: lightblue;
}

.item3 {
  background-color: lightgreen;
}

.item4 {
  background-color: lightgoldenrodyellow;
  grid-column-end: span 1;
}

// No JavaScript required for this demo