你的问题有一个解决方案

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}
.row {
    display: contents;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of dataa really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

您可能希望使用grid-template-columns属性来设置列数，但是，您还应该更新HTML结构以使其工作：

div {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

以下是更新的fiddle：https://jsfiddle.net/dk9epf57/9/

div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}
td {
  border: solid 2px red;
}

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
 </div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
    <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>

您已经有了一些答案，这一个是为了补充我前面的评论，并提供一些示例，以帮助您理清您想要的内容，并决定进一步深入研究https://css-tricks.com/snippets/css/complete-guide-grid/或类似https://gridbyexample.com/的resource之类的网格教程
display:table和display:grid可能看起来有点相似，但不是。
关于示例中使用的max-content，您还可以看到How do min-content and max-content work?

div {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

div.bc {
  background: red;
  border: red 1px solid;
  background: red;
  gap: 1px;
  width: max-content;
}

div.bc>* {
  background: white;
  border: none;
}

div.bnc {
  width: max-content;
  border: solid 1px red;
  gap: 2px;
  padding: 2px;
}
div.bnc p {
padding:0.5em;
}

<h3>CSS grid layout dispatching children into 3 columns</h3>
<b>border-collapse not avalaible;<b><br><br>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>HTML table-layout</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
  <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout and border-collapse faked through gap and background and width<b><br><br>
<div class="bc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout without border-collapse faked width<b><br><br>
<div class="bnc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

你可以用Grid轻松地做到这一点，但首先要让你的HTML更简单一点：

<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

试试这个CSS：

div {
  display: inline-grid;
  grid-template-columns: repeat(3, min-content);
  background: red;
  padding: 2px;
  gap: 2px;
}

p {
  background: white; 
  margin:0;
}

CodePen demo