CSS网格使用静态最小最大值自动填充列

Question

我想在对称网格中显示不同数量的相同高度和大小的图像。使用CSS网格和auto-fill和minmax，我希望能够为我的轨迹定义最小和最大像素宽度，这样我就可以防止图像缩放过小，同时在用户视口允许的情况下将尽可能多的图像放在一行上。给定以下标记：

<div class="gallery">
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
</div>

在每个图像都有300 x 300px的内在尺寸的情况下，我希望以下CSS能够实现这一点：

img {
max-width: 100%;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 300px));
grid-gap: 1rem;
}

然而，我看到的是，轨道并没有在300到210px之间缩放，相反，一旦无法容纳300px，轨道就会换行。

然而，我可以使用max-content来实现期望的结果。

img {
max-width: 100%;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, max-content));
grid-gap: 1rem;
}

但是max-content将是图像将占据的最大宽度，应该是300px，所以我不明白为什么使用300px的静态值没有同样的影响。

Answer 1

这是一种棘手的情况，因为minmax倾向于默认为max值，而这似乎是浏览器在触发换行时所考虑的。

我认为目前可用的最佳方法是在容器上使用max-content(正如您所拥有的(，然后在网格项级别控制图像的max-width。

此外，从auto-fill切换到auto-fit，这样空轨道就会塌陷，并且有空间供max-width工作。

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
grid-gap: 1rem;
}
a {
max-width: 300px;
}
img {
width: 100%;
}

<div class="gallery">
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
<a href="">
<img src="https://via.placeholder.com/300/300" alt="">
</a>
</div>

jsFiddle演示