过去几个小时，我一直在试用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组件，它需要一个外部 Package 器标记。
1.我在一个未知长度的数据集上循环，React在每次迭代中都需要一个key。
1.我想创建斑马条纹或悬停事件，以每行为基础进行响应。
1.我的强迫症不喜欢所有的孩子都住在一起，没有某种分组。
我应该用好table吗？