如何阻止我的CSS网格列使用minmax（）增长？

Question

我正在使用CSS网格来实现卡网格布局。

但我不知道如何调整minmax()语句来处理没有足够的项目来填充行但仍然需要它们看起来像卡的用例！

如果我用一个静态100px替换最大1fr值，或者我使用小数0.25fr，它会在较小的介质尺寸下打乱缩放比例。

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
    grid-column-gap: 17px; 
 
    grid-row-gap: 25.5px; 
 
    padding-bottom: 25.5px; 
 
} 
 
.card { 
 
    background-color: #000; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</div>

然后，如果只有几个项目

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
    grid-column-gap: 17px; 
 
    grid-row-gap: 25.5px; 
 
    padding-bottom: 25.5px; 
 
} 
 
.card { 
 
    background-color: #000; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</div>

Answer 1

的关键是使用auto-fill而不是auto-fit。

---

当repeat()功能设定为auto-fit或auto-fill，网格容器创建尽可能多的网格轨道（列/行）尽可能而不溢出容器。

（请记住，当容器创建网格时，网格物品的数量是无关紧要的，容器只是按照指示布置列和行，这会创建网格单元格，而不会查看是否存在项目来填充它们）。

随着auto-fit，当没有足够的网格项来填充创建的轨道数时，这些空轨道会折叠。

以您的代码为例，当没有足够的网格项填充行中的所有列时，这些空列将折叠。空列使用的空间成为空闲空间，然后均匀分布在现有项目中。通过吸收可用空间，项目会增长以填充整行。

与auto-fill，除了空的曲目没有折叠，所有内容都与auto-fit相同。他们被保留。基本上，网格布局保持固定，有或没有物品。

这是auto-fill和auto-fit之间的唯一区别。

下面是从规范的更多：搜索附加https://www.w3.org/TR/css3-grid-layout/#auto-repeat

^{关键字：之间自动填充自动调整}