Html 使用重复行和稀疏标题构建CSS网格布局

我正在尝试使用CSS网格进行布局，但却很难弄清楚如何做到这一点。以下是布局示意图：

(empty)   | (empty)   | label     | (empty)
---------------------------------------------
col1      | col2      | col3      | col4

我遇到的问题是，我想根据需要重复第二行

理想情况下，我还希望能够将子元素扔到网格容器中，让它们流入正确的位置，而不必在它们上指定

网格区域

也就是说，理想情况下，我可以使用以下标记生成此布局：

<div class="grid-container">
  <div>label</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>


标签
可乐
可乐
可乐
可乐

我已经看了一个小时左右的网格文档，似乎不知道该怎么做。有什么建议吗

使用
网格区域：1/3/2/4.label
部门的code>必须向其添加一个类<代码>1/3/2/4

表示网格行开始/网格列开始/网格行结束/网格列结束。基本上，我们将

.label

放在第一行的第三列。这里有更多信息

虽然我们可以使用

：：before

作为第一个元素，使用

网格区域：1/1/2/5<代码>网格

将

：：视为第一个元素

使用

z-index

将一个元素设置为另一个元素

z-index

以某种特定的方式为

grid

子项工作。此处有更多信息（控制重叠内容）

如您所见，其他子元素在没有特定的

网格区域设置的情况下工作


.grid容器{
显示：网格；
网格模板列：重复（4，1fr）；
网格自动行：最小最大值（20px，自动）；
栅柱间隙：1px；
网格行间距：1px；
}
.grid容器：：之前{
内容：''；
网格面积：1/1/2/5；
z指数：1；
背景：青色；
}
.网格容器.标签{
网格面积：1/3/2/4；
z指数：2；
}

标签
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐