CSS 网格，数据按行分组

Question

在过去的几个小时里我一直在进行display: grid测试，但还没有找到如何将数据按行分组的有效示例（这似乎是一个非常常见的用例）。我正在尝试用 CSS 网格替换表格布局，但无法完全破解它。

考虑这个 HTML：

<div class="wrapper">
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Very Much Longer Data</div>
    </div>
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Regular Data</div>
    </div>
</div>

还有这个CSS：

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

上面的 CSS 只会影响行，但不会布局列。如果我在每行内嵌套另一个网格，则数据点没有关系，并且不会一致扩展（直到subgrid）。

这对我来说很重要有几个原因：

1. 我希望每一行都是一个 React 组件，它需要一个外部包装标签。
2. 我正在循环一个未知长度的数据集，Reactkey在每次迭代时都需要 a 。
3. 我想创建按行响应的斑马条纹或悬停事件。
4. 我的强迫症不喜欢所有的孩子都住在彼此旁边而不进行某种分组。

我应该只使用good-ol 表吗？

Answer 1

CSS子网格功能是css 网格规范第 2 级的一部分，并且完全符合您的要求。它允许您设置：

grid-template-columns: subgrid

在组容器上（即row）。然后，组容器使用与其父级相同的网格，包括调整所有组容器中的列大小。

然而，该功能还没有足够的浏览器支持，所以我们必须等待。