Table with CSS Grid - html

Question

My CSS Grid table doesn't have same width on its columns, I want to replicate the table structure but with CSS Grid.
I'm using grid-auto-flow: column; because in my app, the cells are dynamically generated and will be different in number.
An image to show the issue:
The code:
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>

Answer 1

There is a solutions for your question
.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>

Answer 2

You might want to use the grid-template-columns property to set the number of columns, however, you should also update the HTML structure for that to work:
div {
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
here's the updated 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>

Answer 3

You had a few answers, this one is to complete my earlier comment with examples to help you sort out what you want and decide to dig further into grid tutorials like https://css-tricks.com/snippets/css/complete-guide-grid/ or ressource alike https://gridbyexample.com/
display:table and display:grid may look similar somehow but are not.
about max-content used in the examples, you also can see 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>