如何保证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"one_answers";X"列具有相同的宽度，而无需手动指定一个恒定的最小宽度(使用minmax(100px, 1fr)之类的东西)，这样无论内容在中间，它总是在屏幕上居中。当中间列的内容有点短时，上面的代码片段工作得很好，但是我希望两边的列保持它们的宽度，即使中间列增加。有办法做到这一点，使用CSS网格，Flexbox或其他手段?(除了JavaScript)

Answer 1

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

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

根据需要更改像素。如果你需要更多的信息，这是参考资料。