我可以根据其中的项目数量动态更改 CSS 网格吗？ [重复]

Question

我的代码如下：

<div class="dashboard">
        <div class="dashboard-event">
        </div>
        <div class="dashboard-event">
        </div>
    </div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dashboard-event {
  /* width: 1237px; */
  height: 368px;
  background: #242424;
  border: 2px solid #C2AD7E;
  border-radius: 24px;
}

html 中的项目数量目前是固定的，但会是动态的，具体取决于当前正在进行的事件数量。 当只有 1 个事件运行时，我希望这个事件 100% 延伸到最后。 当有超过 1 个事件时，我想在一行中显示最多 3 个项目。在这种情况下将是：

grid-template-columns: repeat(3, 1fr);

是否可以动态地执行此操作？ 现在只有一个时，它保持 1 / 2

的长度