CSS网格如何保证中间列居中？

Question

我有三栏；中间有一个主柱，两侧各有两个。两侧栏的宽度根据其内容而变化 - 其中一栏甚至可能是空的。我希望中间栏的内容能够增长，同时保持两侧栏的宽度。

这是我的尝试的片段：

.row {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: space-between;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
}

.row > * {
  background-color: #ccccff;
  height: 40px;
}
.middle {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="row">
  <div class="right">Hello</div>
  <div class="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  <div class="left">X</div>
</div>

我想要实现的是“Hello”和“X”列具有相同的宽度，而无需手动指定恒定的最小宽度（使用类似

minmax(100px, 1fr)

的内容），这样无论内容在中间，它始终位于屏幕中央。当中间列中的内容有点短时，上面的代码片段工作正常，但我希望两侧的列保持其宽度，即使中间列增长也是如此。有没有办法使用 CSS Grid、Flexbox 或其他方法来做到这一点？ （除了 JavaScript）

Answer 1

您应该尝试使用 minmax 例如：

 grid-template-columns: minmax(0, 40px) auto minmax(0, 40px);

根据需要更改像素。 这里是您需要更多信息时的参考。

Answer 2

补充vitomadio的答案，如果我们有大约3列，我们可以将其他列的宽度设置为

1fr

，并将中间的列设置为

auto

。

grid-template-columns: 1fr auto 1fr;