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. 我正在遍历长度未知的数据集，而React每次迭代都需要key。
3. 我想创建每行响应的斑马条纹或悬停事件。
4. 我的强迫症患者不喜欢没有任何分组的所有相邻孩子。

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