我有 10 个 div(64px x 64px)，我想最多显示 5 列(对于大和超大视口(viewport))和最少 3 列(对于 iPhone 7 等小视口(viewport))。
我正在尝试使用 CSS Grid 执行此操作，但无法执行最小列部分(即使有空间容纳 3 个列，它也会变为 2 列)。
body {
background-color: wheat;
}
.parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
max-width: 800px;
}
.child {
height: 64px;
width: 64px;
background-color: brown;
}<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>网格容器的最大宽度为 800 像素。
这是 Codepen 的链接
编辑:如果可能，我只想使用 CSS Grid 完成此操作，即不使用媒体查询或 Flexbox。
最佳答案
您可以使用 @media 获得所需的输出使用的查询 grid-template-columns: repeat(5, 1fr);用于大型设备和 grid-template-columns: repeat(3, 1fr) ;用于小型设备
body {
background-color: wheat;
}
.parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
.child {
height: 64px;
width: 64px;
background-color: brown;
}
@media(max-width:540px){
.parent {
grid-template-columns: repeat(3, 1fr);
}
}<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>关于html - 使用 CSS Grid 设置最小和最大列数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52417889/