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，并且看来这是浏览器触发换行时要考虑的。

我认为当前可用的最佳方法是在容器上使用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>

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

1 个答案:

jsFiddle demo