auto-fit + minmax() 能自动适配列数，无需媒体查询；flex: 1 失效常因未设 min-width: 0 或 box-sizing: border-box；语义顺序、页脚贴底等需手动控制。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) 就能覆盖绝大多数响应式多列场景，无需媒体查询、不依赖 JavaScript、不用写断点。
为什么这两行比@media更省事
传统响应式靠一堆 @media (min-width: 768px) 控制列数，但断点一改就要同步调 HTML 结构、gap、grid-template-areas、甚至 JS 逻辑。而 auto-fit + minmax() 是浏览器自动算：容器剩多少空间、能塞几列、每列最小不小于 200px、最大拉满等分——你只管给约束，它自己排。
- 改最小宽度？只动
minmax(200px, 1fr)里的200px - 想让卡片在小屏下也保持间距？加一行
gap: 1rem，所有断点自动生效 - 内容高度不一致导致错位？补上
align-items: start，避免默认拉伸 - 父容器没设
width或被浮动/绝对定位干扰？grid不会生效，先检查 computed styles 里display是否真为grid
flex: 1 在三栏里为啥经常失灵
很多人给中间栏写 flex: 1，结果左边导航栏一放长菜单，中间就缩成一条线——因为 flex: 1 等价于 flex-basis: 0%，它从零开始分剩余空间，但左右栏的固有尺寸（比如未限制宽度的文本、图片）会先占掉大量空间，中间栏自然没得可分。
- 必须给中间栏加
min-width: 0，强制允许压缩到零 - 所有子项统一加
box-sizing: border-box，否则 padding/border 会让总宽超 100% - 别同时写
width: 300px和flex: 1，后者会覆盖前者 - 如果左右栏要固定像素宽（如
240px），直接写flex: 0 0 240px，比只写width更可靠
哪些地方不能省，必须手动控制
auto-fit 解决的是“列数自适应”，但它不管语义顺序、无障碍读取顺序、单列堆叠时的视觉流，也不处理页眉跨全宽、侧边栏固定位置这种强结构需求。
- 移动端需要主内容优先读取？用
order: -1调整 DOM 顺序，别指望 grid 自动优化 - 页脚要始终贴底？
grid本身不提供 sticky 效果，得配合min-height: 100vh或grid-template-rows: 1fr auto - 某张图片在小屏下必须占满整行？不能只靠 grid，得单独加
grid-column: 1 / -1 -
minmax(200px, 1fr)中的200px不是魔法值——它得和你的卡片内容实际最小渲染宽度匹配，否则会触发换行或溢出
真正省 CSS 的关键，不是删代码，而是把「变」的部分交给浏览器自动算，把「不变」的部分（语义、顺序、关键约束）写死。一旦你开始纠结“这个断点要不要加 max-width”，说明已经偏离了 auto-fit 的设计原意。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
