无需定义列宽，如何用auto-fill实现CSS Grid自适应折叠？

阿华AIGC实验室

2026-5-6

当然有完美的解决方案！

不用媒体查询，仅靠auto-fill和minmax()就能实现你要的响应式网格布局，还能让列宽自动适配可用空间。先给你修正下原代码里的语法小问题，再一步步讲实现思路：

原代码的语法错误修正

你写的CSS里有两处小问题：

display: grid, 这里的逗号是错误的，CSS属性值之间要用分号分隔
div::first-child: 多了一个冒号，而且我们需要的是伪类选择器:first-child（伪元素::first-child是用来选元素的第一个子节点内容的，这里应该选第一个div元素）

核心实现方案

我们可以利用grid-template-columns: repeat(auto-fill, minmax(【最小列宽】, 1fr))这个组合，让网格自动根据容器宽度调整列数：

section {
  display: grid;
  gap: 1rem; /* 加个列间隙，布局更美观 */
  /* 关键：每列最小宽度设为250px，最大自动平分剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* 让第一个div占2列，用span更直观，和1/3效果一致 */
section > div:first-child {
  grid-column: span 2;
}

效果说明

这个布局会自动根据视口/容器宽度调整：

宽屏（≥ 750px + 2*间隙）：能放下3列，第一个div占2列，剩下的列自动排列，每列宽度平分容器剩余空间
中等屏幕（500px ~ 750px + 间隙）：只能放下2列，第一个div会自动占满整行（因为span 2在2列网格里就是整行），后面的div每一行放2个，列宽同样平分空间
窄屏（< 500px）：只能放下1列，所有div都占满整行，包括第一个div

完整示例代码

<style>
section {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

section > div {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section > div:first-child {
  grid-column: span 2;
}
</style>

<section>
  <div>第一栏（占2列）</div>
  <div>第二栏</div>
  <div>第三栏</div>
  <div>第四栏</div>
  <div>第五栏</div>
</section>