CSS中最小大小的等宽换行列

Question

我的HTML中有任意数量的元素和任意内容。我希望它们在列中对齐，并且都有相同的大小。如果一行溢出，我希望它们换行，但仍保持相同的大小。每一列的大小应尽可能小，即最大的列决定了所有列的大小。

为了这篇文章的目的，我的HTML看起来像这样:

<div class="row">
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</div>

我尝试的第一件事是CSS网格与auto-fit:

.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

这是有效的，但是列的最大宽度为100px，它们不能超过:https://codepen.io/diesieben07/pen/qBxMXXj

正如在许多其他问题中讨论的那样，在规范中不允许对min-content使用auto-fit。我怎样才能达到我想要的布局?如果Flex或其他布局选项更适合这种情况，也欢迎使用。

Answer 1

要解决列问题，请应用以下css代码。我希望你的问题能得到解决。

.row {
width: 500px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.row > * {
background: rebeccapurple;
padding: 1em;
white-space: nowrap;
}

<div class="row">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col with a lot longer text</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>