CSS Grid 中的等宽列

Question

我想让下面的 html 在 n 个相等的列中显示，无论使用 css 网格的行元素有两个、三个或更多子元素 - Flexbox 使这很容易，但我无法使用 css 网格完成它 - 任何帮助赞赏。

 <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

原文由 user1678736 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

长话短说

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

repeat(3, 1fr) 的常见答案不太正确。

这是因为 1fr 是关于可用（！）空间的分布。一旦内容变得大于轨道大小，这就会中断。默认情况下，它不会溢出并相应地调整列宽。这就是为什么并非所有 1fr 都保证宽度相等。 1fr 实际上只是 minmax(auto, 1fr) 的简写。

如果您确实需要列的宽度 完全相同，您应该使用：

 grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0, 1fr) 允许网格轨道小至 0 但大至 1fr ，创建将保持相等的列。但是，请注意，如果内容大于列或无法换行，这将导致溢出。

这是 一个演示差异的示例。

最后，正如 @wegry 和 @zauni 指出的那样，要使其适用于任意数量的子列，您可以利用 grid-auto-columns 和 grid-auto-flow 并使用它：

 grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

原文由 tcurdt 发布，翻译遵循 CC BY-SA 4.0 许可协议