使用 grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))
可以轻松构建响应式 CSS 网格。容器将充满适合一行的元素,无需使用媒体查询。
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.item {
height: 100px;
background: #ccc;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
问题是当屏幕小于 minmax()
中指定的最小值时,元素会比屏幕宽。您可以通过在 400px
处添加媒体查询来解决此问题,但这仅在您知道容器周围没有内容时才有效。当容器可以放置在任何地方时,这几乎是不可能的。
是否有一种方法或属性可以告诉元素它们的宽度永远不应超过 100%?
类似于:用尽可能多的 400 像素的元素填充容器,但要确保它们的宽度都不超过容器宽度的 100%。
最佳答案
您应该将 grid-template-columns
更改为 grid-template-columns: repeat(auto-fit, minmax(min-content, 400px))
因为 minmax
以这种方式工作:它尝试应用最大值,如果失败则应用最小值。但是在这里你可以在右边的网格中获得空白。演示:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(min-content, 400px));
}
.item {
height: 100px;
background: #ccc;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
关于html - 具有 CSS 网格和自动适应 minmax 的完全响应元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47981690/