Make a grid item span all available columns

Question

I have a Grid where items are dynamically added, in short, I want each item to take up all available columns if these columns are not filled. For example, in this picture, I want the brown and cyan elements to go all the way to the right.

I could do it manually by telling each item how many columns to span, but I want to do it automatically. Some result code:

#wrapper {
  background-color: white;
  width: 96px;
  height: 100%;
  margin: 0 auto;
}

.half-hours {
  height: 20px;
  background-color: white;
  border-top: 1px solid rgba(24.7%, 31.8%, 71%, 0.7);
}

#timeline_wrapper {
  position: absolute;
  margin: 0 auto;
  margin-left: -24px;
  width: 120px;
  height: 100%;
}

#timeline {
  float: right;
  height: 100%;
  width: 96px;
  position: relative;
}

#events {
  margin: 0 auto;
  height: 50%;
  width: 85px;
  position: relative;
  display: grid;
  grid-template-rows: repeat(30, 20px);
  grid-gap: 1px;
  grid-template-columns: repeat(3, auto);
}

.event {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

<div id="wrapper">
  <div id="timeline_wrapper">
    <div id="timeline">
      <div class="9 half-hours"></div>
      <div class="9.5 half-hours"></div>
      <div class="10 half-hours"></div>
      <div class="10.5 half-hours"></div>
      <div class="11 half-hours"></div>
      <div class="11.5 half-hours"></div>
      <div class="12 half-hours"></div>
      <div class="12.5 half-hours"></div>
      <div class="13 half-hours"></div>
      <div class="13.5 half-hours"></div>
      <div class="14 half-hours"></div>
      <div class="14.5 half-hours"></div>
      <div class="15 half-hours"></div>
      <div class="15.5 half-hours"></div>
      <div class="16 half-hours"></div>
      <div class="16.5 half-hours"></div>
      <div class="17 half-hours"></div>
      <div class="17.5 half-hours"></div>
      <div class="18 half-hours"></div>
      <div class="18.5 half-hours"></div>
      <div class="19 half-hours"></div>
      <div class="19.5 half-hours"></div>
      <div class="20 half-hours"></div>
      <div class="20.5 half-hours"></div>
      <div class="21 half-hours"></div>
      <div class="21.5 half-hours"></div>
      <div class="22 half-hours"></div>
      <div class="22.5 half-hours"></div>
      <div class="23 half-hours"></div>
      <div class="23.5 half-hours"></div>
      <div class="24 half-hours"></div>
    </div>
  </div>
  <div id="events">
    <div class="event" style="grid-row: 1 / 14; background-color: red;"></div>
    <div class="event" style="grid-row: 1 / 12; background-color: green;"></div>
    <div class="event" style="grid-row: 2 / 6; background-color: blue;"></div>
    <div class="event" style="grid-row: 6 / 7; background-color: orange;"></div>
    <div class="event" style="grid-row: 12 / 14; background-color: brown;"></div>
    <div class="event" style="grid-row: 14 / 16; background-color: yellow;"></div>
    <div class="event" style="grid-row: 14 / 15; background-color: cyan;"></div>
  </div>
</div>

And grid-row for each item is determined and added dynamically. The code to add the event dynamically:

addEventToDOM(event) {
  var wrapper = document.querySelector('#events');
  var eventDiv = document.createElement('div');
  var gridRowStart = (event.start - 9) * 2 + 1;
  var gridRowEnd = (event.end - 9) * 2 + 1;
  var color = availableColors.values().next().value;
  eventDiv.className = 'event';
  eventDiv.setAttribute('style', `grid-row: ${gridRowStart} / ${gridRowEnd}; background-color: ${color};`);
  availableColors.delete(color);
  wrapper.appendChild(eventDiv);
}