CSS Grid布局首项跨双列时小视口出现异常窄列解决方案问询

你遇到的问题本质是固定span 2的规则会强制网格生成隐式列，且隐式列没有继承你显式设置的minmax约束，这里提供两种纯CSS、不需要JS、也不需要媒体查询的适配方案：

方案1：容器查询（逻辑清晰，适用场景广） #

因为你的网格需要在不同宽度的多个页面使用，容器查询可以直接检测网格容器自身的宽度，不受全局视口宽度影响，仅在容器足够容纳2列时启用跨列规则：

/* 给网格容器注册容器查询能力 */
.grid {
  container-type: inline-size;
  /* 原有规则保持不变 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-auto-rows: 300px;
}

.item {
  background-color: palegreen;
  border: 1px solid black;
}

/* 仅当容器宽度≥800px（刚好容纳2个最小宽度为400px的列）时应用跨列规则 */
@container (min-width: 800px) {
  .grid > *:first-child {
    background-color: lightcyan;
    grid-column: 1 / span 2;
  }
}

该方案兼容性覆盖90%以上全球用户，所有现代主流浏览器均支持容器查询特性。

方案2：纯Grid语法适配（兼容更早浏览器版本） #

如果你需要兼容不支持容器查询的旧版浏览器，可以通过补全隐式列约束、调整跨列规则实现自适应：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  /* 给隐式列也设置和显式列一致的最小宽度约束，避免出现窄列 */
  grid-auto-columns: minmax(400px, 1fr);
  grid-auto-rows: 300px;
}

.item {
  background-color: palegreen;
  border: 1px solid black;
}

.grid > *:first-child {
  background-color: lightcyan;
  /* 逻辑：如果存在第3列（即当前网格至少有2列）就跨到第3列前，否则跨到最后一列（即占满整行） */
  grid-column: 1 / min(3, -1);
}

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