Javascript 我可以在CSS网格布局中填充空单元格吗？

我有以下代码：

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(30, 3.33%);
  grid-auto-flow: row;
}

.element1 {
  grid-row-start: 1;
  grid-row-end: 8;
  background-color: red;
}

.element2 {
  grid-row-start: 1;
  grid-row-end: 6;
  background-color: blue;
}

.element3 {
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: yellow;
}

.element4 {
  grid-row-start: 6;
  grid-row-end: 8;
  background-color: green;
}

.element5 {
  grid-row-start: 10;
  grid-row-end: 12;
  background-color: purple;
}

.element6 {
  grid-row-start: 12;
  grid-row-end: 14;
  background-color: orange;
}

输出图像：

我想自动展开所有右侧没有方框的方框，如下图所示：

如果不手动指定框的起始行和结束行，我怎么能做到这一点，而只是自动。。有CSS属性吗

---

非常感谢。

查看（关键字span；）。。。但是您的HTML在这里没有演示它做什么和不做什么；）还有（关键词密集型）基本上你不能。这就是flexbox的用途。