具有静态最小值最大值的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 300像素时，我期望以下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是图像将占据的最大宽度，并且应该为300px，所以我不明白为什么使用300px的静态值不会产生相同的影响。

Answer 1

棘手的情况，因为minmax tends to default to the max value。

我认为当前可用的最佳方法是在容器上使用minmax（根据需要），然后在网格项目级别上控制图像的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>