如何用CSS实现Grid布局列宽与表格一致的对齐效果？

我有多个带.test类的div，每个都设置了grid-template-columns: auto auto auto;和justify-content: start;，用来实现类似flex的列宽自适应元素宽度且左对齐的效果，所以没使用1fr（避免列被过度拉伸）。但现在的问题是，不同.test容器的对应列宽没法像表格那样整齐对齐——第二个.test里的.target元素更长，导致对应列的起始位置不一致。我希望所有对应列的宽度都跟随同列中最长元素的宽度，且不想用table或JavaScript，求纯CSS的简洁解决方案。

当前代码示例 #

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

HTML #

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

期望效果（表格示例） #

希望达到类似表格的对齐效果：即使第二行第一列的"Hellooo"更长，所有第二列的起始位置仍保持一致。

CSS #

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

HTML #

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

把所有.test容器包裹在一个父级grid容器中，让这个父容器统一控制列宽，每个.test作为父grid的一行，这样所有列会自动对齐到同列最长元素的宽度，同时保留列宽自适应、左对齐的特性。

修改后的代码如下：

CSS #

p {
  margin: 0;
}

/* 新增父容器，统一列定义 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 30px;
}

.test {
  /* 移除原有的grid相关属性，让.test的子元素直接成为父grid的项目 */
  display: contents;
}

p:nth-child(2) {
  position: relative;
  width: 120px;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}

HTML #

<div class="grid-container">
  <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>
</div>

原理说明 #

• display: contents让.test容器本身不生成布局盒子，它的子元素直接成为父级grid-container的grid项目，所有行的列共享父容器的列定义。
• 父容器的grid-template-columns: auto auto auto会自动让每一列的宽度适配该列中最长的元素，默认保持左对齐。
• 保留了你原有的列间距和第二列固定宽度的设置，完全符合需求。

内容的提问来源于stack exchange，提问作者cyz3a5c0v1