CSS网格模板列重复次数不超过X次

Question

我有一个布局，其中多个项目将在网格中对齐。让我们以以下为例：

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
display: block;
width: 100%;
background-color: purple;
color: white;
text-align: center;
padding: 30px 5px;
}

<div class="grid-container">
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
</div>

在上面的代码中，网格将每行重复3列，每个项目将扩展到行宽度的1/3。问题是，在响应情况下，网格将始终重复3列。

如果我将repeat的值更改为auto-fit，并调整列大小以使用minmax，我可以控制页面如何缩小，并将列宽度和计数减少到某个合理的值。所以调整后的代码看起来像这样：

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
grid-gap: 20px;
}
.grid-item {
display: block;
width: 100%;
background-color: teal;
color: white;
text-align: center;
padding: 30px 5px;
}

<div class="grid-container">
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
</div>

这可以很好地按比例缩小，但这就是我遇到问题的地方——当页面按比例放大时，我想将列数限制在3。理想情况下，我希望在repeat指令中使用minmax，如下所示：

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

但这当然行不通。如何在保持auto-fit的缩小设置的同时将重复限制为3列？

Answer 1

我不认为可以使用auto-fit或auto-fill设置列数的最大限制。根据定义，他们将在不溢出的情况下创建尽可能多的轨道：

§7.2.2.2.重复填充：auto-fill和auto-fit重复

当给出auto-fill[或auto-fit]作为重复次数时。。。则重复次数是最大可能的正数不会导致网格溢出其网格容器的整数。

并且您不能将minmax()函数的max值设置为30%，因为这样您就会遇到与第一个示例中相同的问题：

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

也就是说，列轨迹在所有屏幕尺寸上都变得固定，并且布局没有响应。

我知道您正在寻找一种不需要媒体查询的解决方案。但如果你想使用网格布局，我认为媒体查询可能是你最好的选择

否则，考虑柔性布局：

jsFiddle演示

.grid-container {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 30%;
min-width: 300px;
flex-grow: 1;
background-color: teal;
color: white;
text-align: center;
padding: 30px 5px;
border: 5px solid white;
}
* {
box-sizing: border-box;
}

<div class="grid-container">
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
<div class="grid-item">Item</div>
</div>

如果你走弹性路线，那么也阅读这篇文章：

• 以最后一行的灵活项目为目标

Answer 2

如果我正确理解，您可以为更大的屏幕设置媒体查询。假设你想为992px以上的屏幕显示一个3列网格，你可以使用类似的东西

@media only screen and (min-width: 992px){
.grid-container{
grid-template-columns: repeat(3, 1fr);
}
}

如果这对你有帮助，请告诉我！在这里查看https://codepen.io/anon/pen/Krzbmz

Answer 3

我通过设置网格的最大宽度解决了类似的问题。我将我的列设置为repeat(自动调整，150px(。我想要最大列数为x4，间距为50px。所以网格的最大宽度设置为800px。