CSS Grid布局单个子项占满全屏宽度，如何保留响应式并限制其宽度

你遇到的问题核心是auto-fit关键字会自动折叠空的网格轨道，当只有1个子项时，仅会生成1个网格列，minmax(150px, 1fr)的上限1fr就会占满整个容器宽度。以下两种方案都可以实现需求，同时完全保留原有响应式特性，不影响多子项的显示效果：

方案1：修改容器grid-template-columns配置（推荐） #

直接调整网格列的最大宽度限制，不需要修改子项样式，逻辑更简洁：

.container {
  overflow: hidden;
  display: grid;
  /* 限制每列最大宽度为一行3列时的单格宽度，最小宽度保留原有150px */
  grid-template-columns: repeat(auto-fit, minmax(150px, min(1fr, (100% - 2 * 10px)/3)));
  grid-gap: 10px;
}

代码说明：min(1fr, (100% - 2 * 10px)/3) 表示每列的宽度最多为「容器总宽度减去2个间隙宽度后除以3」，也就是一行固定最多显示3个项。当屏幕宽度足够时，哪怕只有1个子项，它所在的列宽度也只会是三分之一容器宽度，不会撑满。当屏幕宽度缩小到无法放下3个150px宽度的项时，会自动减少每行展示的数量，和原有响应式逻辑完全一致。

方案2：给子项添加最大宽度限制（兼容性更好） #

如果需要兼容不支持CSS min()函数的老旧浏览器，可以直接给子项加最大宽度限制：

.item {
  width: 95%;
  max-width: calc((100% - 20px)/3); /* 新增这一行，限制子项最大宽度 */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
}

代码说明：直接限制每个子项的最大宽度就是一行3个时的宽度，不管容器有多少个列，子项都不会超过这个宽度，原有多子项的显示效果完全不受影响，小屏幕下也会正常自适应。

内容的提问来源于stack exchange，提问作者s.khan