logo标签列表

CSS网格自动填充列并附带静态的minmax值

csscss-grid
4
我希望在对称网格中展示可变数量、高度相等且大小相同的图像。使用 CSS Grid 和 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没有相同的效果。

1个回答
3

这是一个棘手的情况，因为minmax tend to default to the max value，而浏览器触发换行时似乎考虑的就是这个值。

我认为目前最好的方法是在容器上使用max-content（如您所做），然后在网格项级别上控制图像的max-width。

此外，从auto-fill切换到auto-fit，以使空轨道折叠，并留出空间以便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演示

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接