CSS 网格 - 响应式画廊

Question

有没有办法用 CSS 网格制作符合以下要求的画廊？

1. 图库应始终填满整个容器并具有响应性
2. 图像之间的间隙已修复
3. 每张图片都有有限的最大和最小尺寸（例如 200 像素 - 260 像素）

图库代码如下（本例中span代表图片）：

/* Container */
.grid {
    display: grid;
    grid-gap: 0.25em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Image placeholder */
span {
    display: block;
    background: #eee;
    border-radius: 0.25em;
    width: 100%;
    margin: auto;
}
/* Aspect ratio */
span:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

<div class="grid">
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
</div>

当有足够的项目时，一切正常。但是当画廊只有少数几个时，项目会被拉伸，图像会变得模糊，看起来很糟糕。在这种情况下，应该有与使用自动填充一样的行为。

我们尝试了以下方法，但这些解决方案都不够好：

• 使用auto-fill 而不是auto-fit （图像往往尽可能小而不是尽可能大）
• 限制单个图像的大小（间隙变得不均匀）
• 使用minmax(200px, 260px) 而不是minmax(200px, 1fr) （画廊没有填满整个容器）

有人知道如何解决这个问题吗？任何帮助将不胜感激！

Answer 1

使用auto-fill 而不是auto-fit

参考：https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

.grid {
    display: grid;
    grid-gap: 0.25em;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}