如何使用 CSS 网格确保中间列居中？答案

【问题标题】：How to ensure centering of middle column with CSS grid?如何使用 CSS 网格确保中间列居中？
【发布时间】：2021-08-17 21:16:02
【问题描述】：

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

这是我的尝试：

.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)），这样无论内容在中间，它总是在屏幕上居中。当中间列中的内容有点短时，上面的 sn-p 工作正常，但我希望两侧列保持它们的宽度，即使中间列增长。有没有办法使用 CSS Grid、Flexbox 或其他方式来做到这一点？（除了 JavaScript）

【问题讨论】：

您希望第一列和最后一列相互影响，就像最宽的列的宽度一样，而中间的列占用所有可用空间，对吗？
@ZohirSalak 是的，完全正确。说得好。
CSS 唯一的解决方案是不可能的，列之间没有办法相互影响，一种可能的解决方案是在外列上使用flex:1 0 0;，这样它们将始终具有相同的宽度，因为它们会拉伸为了均匀地占用空间，这给我们留下了中间列导致各种问题，要么我们给它一个更高的 flex-grow 值，要么与带有滚动条的外列相同，或者......，拉伸外列这不是一个可行的解决方案，我们只希望列与最宽一样宽，这在前面提到是不可能的。
感谢您的评论。我担心没有一个简单的解决方案。昨天我花了很长时间试图弄清楚，所以我主要希望我只是错过了一些东西。对于外列，我可能会选择minmax(some-constant, 1fr)。现在必须这样做。

标签： html css flexbox css-grid

【解决方案1】：

例如，您应该尝试使用 minmax：

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

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

【讨论】：

问题是，我无法将像素设置为固定常数，因为我不一定知道最外面的列内容的宽度。