auto-fit会收缩空列并将剩余空间分配给有内容的列，auto-fill则保留所有列槽位；二者必须配合minmax()使用才能响应式布局。
grid-template-columns: auto-fit 和 auto-fill 有什么区别
用 auto-fit 还是 auto-fill，直接决定网格项会不会“撑开”空列。两者都配合 minmax() 使用，但行为相反：auto-fit 会把剩余空间分给已有内容的列（挤掉空列），auto-fill 则保留所有可能的列槽位（哪怕没内容也占位）。
常见错误是写成 grid-template-columns: repeat(auto-fit, 200px) —— 这样根本不会响应式，必须搭配 minmax(min, max) 才能触发自动计算。
-
auto-fit：适合“有多少内容就占多少列”，比如卡片列表、工具图标栏 -
auto-fill：适合需要预留固定列数位置的场景，比如仪表盘格子模板 - 浏览器兼容性没问题，Chrome 57+、Firefox 52+、Safari 10.1+ 都支持
为什么 minmax(250px, 1fr) 比 minmax(250px, auto) 更常用
minmax(250px, 1fr) 是让每列最小 250px、最大均分剩余空间；而 minmax(250px, auto) 的 auto 其实等价于内容宽度，会导致列宽随内容暴增，失去“自适应”意义。
典型翻车现场：用 auto 后，一个带长文本的卡片把整行拉宽，其他列被压缩到最小值，布局崩坏。
立即学习“前端免费学习笔记（深入）”；
-
1fr是弹性分配的关键，它让所有满足条件的列平分自由空间 - 如果希望列宽有上限，可以写成
minmax(250px, 400px)，但会牺牲小屏下的填充率 - 别用
fit-content()替代minmax()，它不触发auto-fit的重排逻辑
content 少时 grid-auto-rows 影响高度一致性
当某些网格项内容少、高度小，而其他项有图片或长文时，整行高度会被最高项拉高——这是正常行为。但如果你期望每行高度统一（比如卡片式布局），光靠 grid-template-columns 不够，得管住行高。
错误做法是给 grid-item 设固定 height，这会导致文字截断或溢出；正确思路是用 grid-auto-rows 控制隐式行高，再配合 align-items 或 display: flex 垂直对齐内容。
-
grid-auto-rows: 1fr对单行无感，只对新增的隐式行生效（比如内容超出定义的行数） - 更稳妥的是设
grid-auto-rows: minmax(200px, auto)，确保每行有基础高度兜底 - 若需卡片底部对齐（如标题+按钮始终在底），在 item 内用
display: flex; flex-direction: column; justify-content: space-between
IE 不支持 auto-fit，但 fallback 方案不能只靠 display: block
IE11 完全不识别 auto-fit 和 minmax()，直接忽略整条 grid-template-columns 声明，退回到初始值（通常是单列）。这时候只加 display: block fallback，会让布局彻底线性化，丢失所有网格语义和响应能力。
真正可用的降级是用 @supports 包裹 Grid 代码，并给不支持的浏览器提供 Flex 布局替代：
section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@supports (display: grid) {
section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
}
- 别依赖 JS 检测来切布局，CSS
@supports更轻量、更可靠 - Flex fallback 中的
flex-basis要和 Grid 的minmax()最小值一致（如flex: 1 1 250px） - 注意
gap在 IE 中无效，得用margin模拟，但要避开首尾项多出的外边距
grid-auto-rows 和 align-items 的组合效果——它们不显眼，却决定着内容少的格子会不会“塌陷”或者“飘在半空”。 
