我有一些div。測試用網格-模板-列:自動自動自動；因為我希望列寬像取決于元素寬度的flex效果一樣，并且還要justify-content:start；將列向左對齊，這也是我使用auto而不是1fr的原因，因為我不希望列被拉伸到盡可能長的寬度。

問題是我不知道如何像表格一樣整齊地對齊列，正如你在下面的例子中看到的，第二個div的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>

重構您的HTML，以便在單個網格中添加所有項目，并使用內聯網格:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

.test {
  display: inline-grid;
}

請注意，您必須將每行的第二個元素作為更復雜的第n個子元素的目標:

p:nth-child(3n + 2) {}

試試看:

.test {
  display: inline-grid;
}

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


/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.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>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

如果您希望網格列的行為像一個表，您需要將項目放在一個網格容器中，而不是兩個獨立的容器中:

<div class="test">
    <p class="target">Hello</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
    <p class="target">Hellooo</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
</div>

要設置每行第二個元素的寬度，只需在網格布局中指定寬度:

grid-template-columns: auto 120px auto;

但是如果我們現在去掉p:n-child(2)選擇器，我們就有了。flex元素完全靠著網格放置，而不是p元素，這會打亂布局。

但實際上，您可以完全擺脫絕對定位，而不會弄亂布局，并將溢出屬性應用于所有網格項目，如下所示:

.test > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

下面是生成的更簡潔的代碼:

p {
  margin: 0;
}

.test {
  column-gap: 30px;
  display: grid;
  grid-template-columns: auto 120px auto;
  justify-content: start;
}

.test > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>