使网格项跨越所有可用列

Question

我有一个Grid，其中项目是动态添加的，简而言之，我希望每个项目都占用所有可用列，如果这些列未填充。 例如，在这张图片中，我希望棕色和青色元素一直向右移动
 我可以通过告诉每个项目要跨越多少列来手动完成，但我想自动完成。 一些结果代码：

Animation

#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>。 动态添加事件的代码：

grid-row