Question

我正在寻找一种自动生成网格的方法，它总是填充可用空间，而收缩项目，直到可以添加其他项目。

大多数响应式网格实现使用链接：

grid-template-colums: repeat(auto-fill, minmax(120px, 1fr));

这很好，除了它使用最小值作为默认图像大小，这导致网格内图像的插值。我想做相反的事情 - 设置最大宽度并在必要时缩小图像。

假设我的网格项目的最大宽度应为400px。以下是我想要获得的一些值：

400px available space: One image with a width of 400px
402px available space: Two images with a width of 201px
800px available space: Two images with a width of 400px
and so on …

基本上我想将图像夹在200px和400px之间，并始终使用最大值。我想我需要这样的东西：

min(max(200px, 1fr), 400px)

到目前为止，我能够实现这一目标的唯一方法是生成一些媒体查询。

/* This example adjusts items to a max-width of 400px with a 10px grid-gap.*/

@media (min-width: 401px) {
  .grid {
    grid-template-columns: repeat(auto-fill, calc((100% - 10px) / 2));
  }
}
@media (min-width: 811px) {
  .grid {
    grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
  }
}

我写了一个Sass mixin来使这个过程更加灵活，但这个解决方案带有一些缺点：

您必须生成任意数量的查询才能处理多种屏幕尺寸，这可能导致死代码
您必须知道媒体查询的网格容器的可用空间（或用于计算可用空间的已用空间）

我正在寻找一种没有这些缺点的方法。

修改

Here is a CodePen of my current code.如果你玩弄它，应该更容易理解我想做什么。

Answer 1

此时，您的媒体查询解决方案可能是您的最佳选择。

目前，CSS Grid不提供灵活的最小值。

来自规范：

minmax(min, max)

定义大于或等于 min 且小于或的尺寸范围   等于 max 。

如果 max＆lt; min ，然后忽略 max 并处理minmax(min,max)   为min。

作为最大值，<flex>值设置轨道的flex因子;它是   至少无效。

注意：此规范的未来级别可能允许<flex>最小值，以及   将更新轨道大小调整算法以正确解释

您是否考虑过使用flexbox：

＆＃13;

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid > div {
  flex: 1 0 200px;  /* can grow, can't shrink, minimum width 200px */
  max-width: 400px;
  margin: 5px;
}

.grid-item {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="grid">
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
  <div><img src="http://placehold.it/400x300" alt="" class="grid-item"></div>
</div>

＆＃13;

revised codepen

具有最大宽度项目的响应式css网格布局

1 个答案:

`minmax(min, max)`