我希望能够自动生成一个网格，始终填满可用空间，同时缩小项目，直到可以添加另一个项目。
大多数响应式网格实现使用类似以下的方式：
这个代码可以正常运行，但是默认图像大小使用最小值，导致网格内的图像插值。我想做相反的操作 - 设置一个最大宽度，如果需要则缩小图像。
基本上，我想将我的图像夹在200px和400px之间，并始终使用可能的最大值。我想我需要这样的东西：
我已经编写了一个Sass mixin来使这个过程更加灵活，但是这种解决方案有一些缺点：
大多数响应式网格实现使用类似以下的方式：
grid-template-colums: repeat(auto-fill, minmax(120px, 1fr));
这个代码可以正常运行，但是默认图像大小使用最小值，导致网格内的图像插值。我想做相反的操作 - 设置一个最大宽度，如果需要则缩小图像。
假设我的网格项应该有最大宽度为400像素。以下是我想要获取的一些值：
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来使这个过程更加灵活，但是这种解决方案有一些缺点：
- 您必须生成任意数量的查询来处理多个屏幕尺寸，这可能会导致死代码
- 您必须知道网格容器的可用空间以进行媒体查询（或使用的空间来计算可用空间）
编辑：
这里是我的当前代码的CodePen链接。如果你在其中玩耍，应该更容易理解我想做什么。