响应式CSS Grid无法收缩至单列问题求助

问题描述 #

制作了一个包含响应式CSS Grid的HTML页面，当缩小浏览器窗口时，网格停留在2列无法收缩至单列；但将grid-template-columns中的最小宽度从220px改为250px时，表现正常。相关代码如下：

CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  grid-template-rows: 150px 150px 150px 150px 150px;
}

.item-1 { background-color: #999999; }
.item-2 { background-color: #FC6057; }
.item-3 { background-color: #FDA061; }
.item-4 { background-color: #01A787; }
.item-5 { background-color: #1BC1A1; }

HTML代码 #

<body style="margin:0px;">
  <div class="container">
    <div class="item-1"> item-1 </div>
    <div class="item-2"> item-2 </div>
    <div class="item-3"> item-3 </div>
    <div class="item-4"> item-4 </div>
    <div class="item-5"> item-5 </div>
  </div>
</body>

原因分析 #

问题出在auto-fill的列数计算逻辑和minmax()函数的组合上：

1. 规则等价转换：当容器宽度≥220px时，min(220px, 100%)结果为220px，此时grid-template-columns等价于repeat(auto-fill, minmax(220px, 1fr))。
2. auto-fill的行为：auto-fill会尽可能创建多的列轨道，只要单个轨道的最小宽度（220px）≤容器宽度。即使这些轨道的总最小宽度超过容器宽度，浏览器仍会创建对应数量的轨道（因为Grid容器默认overflow: visible，允许轨道溢出）。
3. 220px与250px的差异：
   • 当最小宽度为220px时，容器宽度在220px~440px区间内，auto-fill会尝试创建2列（单轨道最小宽度220px≤容器宽度）。此时每列的最小宽度限制为220px，总宽度440px会超过容器宽度，导致轨道溢出，视觉上呈现2列布局。
   • 当最小宽度为250px时，容器宽度在250px~500px区间内，auto-fill只能创建1列（2列的总最小宽度500px超过容器宽度）。此时轨道宽度由1fr拉伸至容器宽度，符合minmax(250px, 1fr)的规则，呈现单列布局。

解决方法 #

将auto-fill替换为auto-fit即可解决问题：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  grid-template-rows: 150px 150px 150px 150px 150px;
}

auto-fit会在创建轨道后折叠空轨道，当容器宽度不足以容纳多列时，自动保留必要的列数并拉伸至容器宽度，实现正常的响应式收缩效果。

内容的提问来源于stack exchange，提问作者Rolf