我希望在对称网格中展示可变数量、高度相等且大小相同的图像。使用 CSS Grid 和
在每个图像的固有尺寸为300 x 300px时,我期望以下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;
}
然而,我看到的情况是,在300px和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没有相同的效果。