我有一些div .test和grid-template-columns: auto auto auto;，因为我希望列宽度类似于依赖于元素宽度的Flex Effect，还希望justify-content: start;将列与左侧对齐，这也是我使用auto而不是1fr的原因，因为我不希望列被拉伸到可能的更长宽度.
问题是我不知道如何像表格那样整齐地对齐列，S，你可以从下面的例子中看到，第二个div.test的p.target比第一个长，我试图实现的是让所有其他列的宽度都跟随最长的列.
附言:我不想用桌子.我还可以使用JavaScript找到最长的一个，并将所有其他的宽度设置为这个值.我只是想看看是否有一个简单的解决方案，只用css.
p {
margin: 0;
}
.test {
column-gap: 30px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: start;
}
p:nth-child(2) {
position: relative;
width: 120px;
}
.flex {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
right: 0;
}<div class="test">
<p class="target">Hello</p>
<p><span class="flex">Helloooooooooooooo</span></p>
<p>Hello</p>
</div>
<div class="test">
<p class="target">Hellooo</p>
<p><span class="flex">Helloooooooooooooo</span></p>
<p>Hello</p>
</div>例如，它在表格中如下所示:
td:nth-child(2) {
position: relative;
width: 120px;
}
.flex {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
right: 0;
top: 0;
}<table>
<tbody>
<tr>
<td>Hello</td>
<td><span class="flex">Helloooooooooooooo</span></td>
<td>Hello</td>
</tr>
<tr>
<td>Hellooo</td>
<td><span class="flex">Helloooooooooooooo</span></td>
<td>Hello</td>
</tr>
</tbody>
</table>请注意，所有第二列一起开始，即使第一列"helloo"从第二行开始更长.