答案：auto-fill保留空白轨道，auto-fit拉伸列填充空间；两者结合minmax和gap可实现响应式网格布局，适用于不同场景的自适应设计需求。

在CSS初级项目中实现响应式网格布局，grid auto-fill 与 auto-fit 是两个非常实用的关键字。它们能帮助开发者快速创建自适应容器宽度的网格，无需为不同屏幕尺寸写大量媒体查询。

理解 auto-fill 与 auto-fit 的基本作用

这两个关键字用于 repeat() 函数中，配合 minmax() 创建动态列数的网格。它们都基于可用空间自动填充列，但行为略有不同：

• auto-fill：尽可能多地生成符合条件的网格轨道，即使某些轨道为空也会保留空间。
• auto-fit：生成符合条件的轨道后，会拉伸这些列以填满剩余空间，不会留下空白轨道。

例如，下面这行代码会创建一个最小150px、最大1fr的列：

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

使用 auto-fill 实现固定最小宽度的自动换行布局

当你希望每个网格项至少保持某个最小宽度，并在空间不足时自动换行，auto-fill 非常合适。它会在一行中尽可能多放列，哪怕后面几列是空的（实际开发中通常不空）。

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

立即学习“前端免费学习笔记（深入）”；

• 适合卡片列表、图库等需要“占位”一致性的场景。
• 容器变宽时，新列会立即出现，而不是拉伸现有列。
• 结合 gap 属性可控制间距，提升视觉舒适度。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

使用 auto-fit 实现拉伸填充的紧凑布局

如果你更关注内容区域的充分利用，auto-fit 更合适。它会让已生成的列自动拉伸，填满整个容器。

• 适合表单、按钮组等需要“撑满”的组件。
• 小屏幕上列少但宽；大屏幕上列多且均匀分布。
• 视觉上更紧凑，没有多余空白。

.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

基本上就这些。掌握 auto-fill 和 auto-fit 的区别，再搭配 minmax 和 gap，就能在初级项目中轻松实现响应式网格，不需要JavaScript或复杂框架。关键是根据设计需求选择“留空”还是“拉伸”。