auto-fit 会拉伸已有网格项填满容器，auto-fill 则保留空轨道；两者结合 minmax() 与 repeat() 可实现无需媒体查询的响应式网格布局。
在CSS中实现响应式网格布局，auto-fit 和 auto-fill 是两个非常实用的关键字，配合 repeat() 与 minmax() 能让网格子元素自动适应容器宽度，无需媒体查询即可完成自适应布局。
auto-fit 与 auto-fill 的基本用法
它们都用于 grid-template-columns 或 grid-template-rows 中，搭配 repeat() 函数使用：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
auto-fill：尽可能多地填充列，即使某些轨道为空也会保留空间。
auto-fit：填充后将空余的轨道拉伸，使已有项目占据剩余空间。
实际效果对比
假设容器宽度足够放下5个200px的格子：
- auto-fill：生成5个轨道，哪怕只有3个子元素，后面2个留空
- auto-fit：生成3个轨道，并把这3个格子拉伸占满整行
这个差异在动态内容或数据不固定时特别有用。
立即学习“前端免费学习笔记（深入）”；
结合 minmax 实现弹性列宽
使用 minmax(最小值, 最大值) 可设定每列的弹性范围：
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
含义是：每列最小150px，最大为1份flexible长度。当容器变窄时，自动换到下一行（实际上是减少每行的列数）。
这种写法适合卡片布局、图库、产品列表等场景，能自然适配手机、平板和桌面端。
常见实践建议
为了获得更稳定的响应式效果，可以注意以下几点：
- 优先使用 auto-fit 让内容填满可用空间，视觉更紧凑
- 用 minmax() 控制最小宽度，避免小屏下文字挤成一团
- 添加 gap 设置间距，比margin更整洁
- 对单个子元素使用
colspan类效果可用grid-column: span 2等控制跨列
基本上就这些。掌握 auto-fit 与 auto-fill 的区别，再结合 minmax 和 fr 单位，就能写出简洁高效的响应式网格，不用写一堆媒体查询也能让页面自然流动。不复杂但容易忽略细节。
