CSS 网格中的等宽列

我想让下面的 html 在 n 个相等的列中显示，不管是否有两个，或三个，或更多的子元素到 row 元素使用 css 网格-Flexbox 使这很容易，但我不能使用 css 网格完成它-任何帮助都是感激的。

<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
154620 次浏览
小开

试试这个:

.grid-container {
display: grid;
grid-auto-columns: 1fr;
}


.grid-items {
grid-row: 1;
}

否则，这里有一个可能有用的演示: < strong > jsFiddle

要了解 fr单元，请看以下文章:

小开

在网格容器中定义此项。设置三列宽度相等。

grid-template-columns: repeat(3, 1fr);
小开

这使得列能够更好地分布，并且无论项的大小是否调整，列的大小都是相同的。

.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
grid-column: span 1;
}
小开

@ Michael _ B 的答案就快出来了。

.grid-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}

在编写本文时，在 Chrome、 Firefox 和 Safari 中提供一行大小相同的列。

小开

DR

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一样大，从而创建保持相同的列。但是，请注意，如果内容大于列或无法包装，这将导致溢出。

下面是 一个例子，它演示了这种差异。

最后，正如 @ wgry和 @ zauni所指出的，为了使它适用于任意数量的子列，您可以利用 grid-auto-columns和 grid-auto-flow并使用以下方法:

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

这里有一个简单的答案(至少在我看来)。我得到这个问题以上的答案没有帮助我。这里的代码将“ div”分割为等宽度和所需的列数。

//CSS


.grid-container {
display: grid;
grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}


//HTML
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>

在这里可以看到更多关于网格的信息

小开

这些答案对我都不管用，所以我试了另一种方法。在我的例子中，项目大小与内容有关。有些内容比其他内容大，因此所有列不相等。我只是包装任何项目与另一部分，有100% 的宽度和100% 的高度，这是工作。

<div class="row">
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
</div>

这对我很有效，我希望能帮助你。

小开

这个怎么样？

.row {
display: grid;
grid-template-columns: repeat(3, calc(100% / 3));
}
小开

问题要求的是 随心所欲的列数，而不是3! 所以使用这个:

.grid-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
.grid-container > * {
overflow: hidden;
}

这样，它的子类(在 css 中使用“ > *”选择)不需要有任何特定的类，甚至不需要是 div。

例子: https://codepen.io/dimvai/pen/RwVbYyz

小开

全宽响应包装

在移动设备上缩小规模时，所有这些答案都没有全宽或包装到新行。如果您想要类似于 bootstrap 的东西，这可能就是您正在寻找的。注意，200px 是包装到新行的下限。

.grid-container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

提交答案