CSS 网格自动填充具有静态 minmax 值的列

Question

我想在对称网格中显示可变数量的相同高度和大小的图像。使用 CSS 网格和 auto-fill和 minmax我希望能够为我的轨迹定义最小和最大像素宽度，这样我就可以防止图像被缩放得太小，同时在用户视口(viewport)允许的情况下在一行中拟合尽可能多的图像。鉴于以下标记:

    <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 到 210 像素之间缩放，而是在 300 像素无法容纳时轨道会自动换行。

但是我可以使用 max-content 达到预期的结果反而。

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

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

Answer 1

棘手的情况，因为 minmax tends to default to the max value ，这似乎是浏览器在触发换行时所考虑的。

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

另外，从 auto-fill 切换至 auto-fit , 这样 empty tracks collapse并且还有 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 demo