repeat(auto-fit, minmax(250px, 1fr))可实现无js、零媒体查询的响应式网格，因auto-fit动态计算列数并拉伸填满，而minmax定义弹性区间；它优于浮动（需手动清除）和flexbox（一维、换行不均），但页面级结构仍需@media配合grid-template-areas。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现真正轻量、无 JS、零媒体查询的响应式网格，比手写浮动或 Bootstrap 类名更简洁，也比纯 flex-wrap 更可控。
为什么不用浮动或 Flexbox 做基础栅格
浮动方案要手动 clear、处理负边距、写一堆 .col-6 类，且无法天然支持二维对齐；Flexbox 是一维布局，强行做“换行网格”时，flex-wrap: wrap 无法保证每行列数一致，也无法跨行对齐内容（比如所有卡片高度自动拉平）。而 Grid 天然支持行列定义、间距统一、语义清晰，现代浏览器（Chrome 66+、Firefox 61+、Safari 11.1+）已全量支持，无需 polyfill。
auto-fit 和 auto-fill 的关键区别
两者都用于 repeat() 内部，但行为完全不同：
-
auto-fit：生成**有内容的轨道**，并把剩余空间平均分配给这些轨道（即列会拉伸填满整行） -
auto-fill：生成**尽可能多的轨道**（哪怕没内容），导致小屏下出现“不可见空列”，破坏布局密度 - 实际效果上，
auto-fit更符合直觉——列数随容器宽度自然增减，且不浪费空间 - 必须搭配
minmax()使用，否则auto-fit会把列压缩到 0 宽度
如何避免常见塌陷与错位问题
这类问题大多源于对 Grid 轨道计算逻辑的误判：
- 子元素设了
width: 100%或max-width固定值，会顶破minmax()的弹性约束，导致换行异常 -
gap用%单位，在窄屏下可能缩到 0，建议统一用px或rem - 在嵌套 Grid 中，父容器未设
display: grid，或子容器写了grid-column: span 2但父轨道不够宽，就会溢出或错位 - IE 不支持
gap，如需兼容，得用padding+margin模拟，或加降级规则：@supports not (gap: 1rem) { ... }
什么时候该加媒体查询而不是依赖 auto-fit
auto-fit + minmax() 解决的是「卡片类网格」的列数自适应，但它不控制页面级结构。以下情况必须用 @media：
- 调整
grid-template-areas—— 比如桌面端是"header nav main sidebar"，移动端改成"header" "main" "nav" "sidebar" - 切换整体断点下的列宽比例 —— 比如小屏强制单列（
1fr），中屏双列（repeat(2, 1fr)），大屏四列（repeat(4, 1fr)），此时minmax()的最小值会失效 - 需要为特定设备优化性能 —— 如平板端禁用
subgrid（目前仅 Firefox 支持），或为 Safari 旧版绕过grid-auto-flow: dense的渲染 bug
最易被忽略的一点：Grid 的弹性计算只响应容器尺寸，不响应内容高度。如果卡片内文字过多撑高，相邻卡片不会自动等高 —— 这不是 bug，是设计使然。真要等高，得靠 align-items: stretch（默认值）配合子项不设 height，或用 min-height 统一基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
