应使用 auto-fit；auto-fit 会收缩空轨道使剩余列拉伸填满容器，实现内容尺寸驱动列数，而 auto-fill 会预留空轨道。
grid-template-columns 设置 auto-fit 还是 auto-fill？
用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 才能真正响应内容宽度变化；auto-fill 会预留空轨道，auto-fit 则会把空轨道收缩掉，让剩余列自动拉伸填满容器——这是实现“内容尺寸驱动列数”的关键区别。
常见错误是写成 repeat(auto-fill, 1fr) 或固定列数，结果在小屏下出现横向滚动或列宽被强行压缩。
-
minmax(300px, 1fr)中的300px是单列最小宽度，低于该值就换行；1fr表示剩余空间均分 - 如果内容本身很窄（比如卡片内只有一行文字），建议搭配
grid-auto-flow: column慎用——它会改写流向，容易破坏阅读顺序 - 不要给子项设固定
width，否则会顶破minmax()的约束
子元素内容高度不一致时，如何避免网格错位？
默认 align-items: stretch 会让所有子项拉伸到行高最大者，但若某项含长文本或图片，可能撑高整行、挤压其他列。此时应显式控制对齐行为。
- 加
align-items: start到容器上，让每项按自身内容高度自然排列 - 若需底部对齐（如卡片带按钮），改用
align-items: end或对单个子项用align-self: end - 慎用
grid-auto-rows: minmax(200px, auto)—— 它只影响显式未定义的行，对auto-fit生成的隐式行无效；真要统高，得靠minmax()配合align-items
响应式断点和 grid 结合时，为什么媒体查询写了却没生效？
根本原因是 CSS 优先级或规则覆盖：如果基础样式里用了 grid-template-columns: repeat(3, 1fr)，后面媒体查询再写 repeat(2, 1fr)，但没提高选择器权重或没放在正确位置，旧规则仍生效。
