出处：掘金
原作者：前端九哥
只用两行 CSS，就能让卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！秘诀就是 CSS Grid 的 auto-fill 和 auto-fit
基础概念
假设有这样一个需求：
- 一排展示很多卡片
- 每个卡片最小宽度
200px，剩余空间平均分配 - 屏幕变窄时自动换行
只需在父元素加两行 CSS 就能实现：
/* 父元素 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* 子元素 */
.item {
height: 200px;
background-color: rgb(141, 141, 255);
border-radius: 10px;
}grid-template-columns- 作用：定义网格容器里有多少列，以及每列的宽度。
repeat(auto-fit, ...)repeat是个重复函数，表示后面的模式会被重复多次。auto-fit是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则- 容器宽度足够时，能多放就多放，放不下就自动换行
minmax(200px, 1fr)minmax也是一个函数，意思是：每列最小 200px，最大可以占 1fr（剩余空间的平分）- 具体来说：
- 当屏幕宽度很窄时，每列最小宽度是 200px，再窄就会换行
- 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（
1fr），让内容填满整行
综合起来 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 这行代码的意思就是：
- 网格会自动生成多列，每列最小 200px，最大可以平分一行的剩余空间（自动填满一行）
- 屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕
- 不需要媒体查询，布局就能灵活响应
auto-fill Vs. auto-fit
auto-fill
尽可能多地填充列，即使没有内容也会“占位”
- 会自动创建尽可能多的列轨道（包括空轨道），让网格尽量填满容器
- 适合需要“列对齐”或“固定网格数”的场景
auto-fit
自动适应内容，能合并多余空列，不占位
- 会自动“折叠”没有内容的轨道，让现有的内容尽量拉伸占满空间
- 适合希望内容自适应填满整行的场景
直观对比
假设容器宽度能容纳 10 个 200px 的卡片，但你只放了 5 个卡片：
auto-fill会保留 10 列宽度，5 个卡片在前五列，后面五列是“空轨道”auto-fit会折叠掉后面五列，让这 5 个卡片拉伸填满整行
- 希望“固定列数/有占位”，用
auto-fill：比如表格、日历，或者你希望网格始终对齐，即使内容不满 - 希望每行“有多少内容就撑多宽”，用
auto-fit：适合卡片式布局、相册、响应式按钮等
| 属性 | 空轨道 | 内容拉伸 | 适用场景 |
|---|---|---|---|
| auto-fill | 保留 | 否 | 固定列数、占位网格 |
| auto-fit | 折叠 | 是 | 流式布局、拉伸填充 |