CSS grid with data grouped by rows

I've been giving display: grid a test drive for the last few hours and haven't found a working example of how to keep your data grouped by rows (which seems like a very common use-case). I'm trying to replace a table layout with a CSS Grid but can't quite hack it.

Consider this 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>

And this CSS:

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

The above CSS will only affect the rows but not lay out the columns. If I nest another grid inside each row then the data points have no relationship and won't expand in unison (until subgrid).

There are a few reasons why this matters to me:

1. I would like each row to be a React component which requires a single outer wrapper tag.
2. I'm looping over a data set of unknown length and React requires a key on each iteration.
3. I would like to create zebra stripes or hover events that respond on a per row basis.
4. My OCD doesn't like all children living next to each other without some sort of grouping.

Should I just use good-ol tables?