CSS网格中的等宽列 [英] Equal width columns in CSS Grid

问题描述

我想使用css网格在下面的html中以n个相等的列显示html元素是否存在两个，三个或更多子元素-Flexbox使此操作变得容易，但我无法使用CSS网格来完成-感谢您的帮助。

I'd like to have the html below showing in n equal columns whether there are two, or three, or more child elements to the row element using css grid - Flexbox makes this easy but I cannot get it done using css grid - any help is appreciated.

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

推荐答案

重复的常见答案（3，1fr）不太正确。

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

This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That's why not all 1fr are guaranteed to be of equal width. 1fr is actually rather just a shorthand for minmax(auto, 1fr).

如果您确实需要使列保持精确相同的宽度，则应使用：

If you really need the columns to be the exact same width you should use:

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

mixmax 允许网格轨迹小至 0 但最大为 1fr ，创建的列将保持相等。但是，请注意，如果内容大于列或无法包装，将导致溢出。

mixmax allows the grid tracks to be as small as 0 but as large as 1fr, creating columns that will stay equal. But, be aware that this will cause overflows if the content is bigger than the column or cannot be wrapped.

此处为一个例子，可以证明两者之间的区别。

Here is an example that demonstrates the difference.

这篇关于CSS网格中的等宽列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！