应使用 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)，但没提高选择器权重或没放在正确位置，旧规则仍生效。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：基础样式用
repeat(auto-fit, minmax(320px, 1fr)))，完全不依赖断点；仅在极端情况（如桌面端强制 4 列）才加媒体查询覆盖 - 检查浏览器开发者工具中，是否该媒体查询规则被 strikethrough —— 很可能是同选择器下后写的规则被前写的同名属性覆盖了
- 移动端优先时，别在
@media (max-width: 768px)里重写整个grid-template-columns，而应直接调整minmax()的第一个参数，例如从320px改为280px
content-box 尺寸模型下，padding 和 border 导致网格溢出怎么办？
子项若设置了 padding 或 border，又没改盒模型，默认按 content-box 计算，会导致实际占用宽度 > 1fr 分配值，从而触发横向滚动或换行异常。
- 统一加
* { box-sizing: border-box }是最稳妥解法，确保width包含 padding 和 border - 如果只针对网格子项修复，可在子项选择器里单独加
box-sizing: border-box - 避免在子项上同时用
width: 100%和padding—— 即使设了border-box，100%也指网格轨道宽度，加上 padding 后可能触边，建议直接靠grid-column: span 1和默认流布局来占位
实际项目中最容易被忽略的是 auto-fit 和 auto-fill 的语义差异，以及子项未设 box-sizing: border-box 导致的视觉错位——这两处一错，整个网格看起来就像“没自适应”。
