我的CSS網格表格沒有相同的寬度，我想復制表格結構，但用CSS網格。

我用的是網格-自動流:列；因為在我的app里，單元格是動態生成的，數量會不一樣。

顯示問題的圖像:

代碼: https://jsfiddle.net/w8sdvnr7/1/

div {
  display: grid;
  grid-auto-flow: column;
}

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>
</div>
<div>
  <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>

你的問題有一個解決方案

.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));
}

這是最新的小提琴: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/或resource alike https://gridbyexample.com/

display:table和display:grid可能看起來有些相似，但事實并非如此。

關于示例中使用的最大內容，您還可以看到最小內容和最大內容是如何工作的？

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演示