应使用 minmax() + auto-fit/auto-fill 实现响应式列数，如 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，配合媒体查询兜底；统一用 gap 控制间距，避免子项 margin；优先用 grid-auto-rows 替代显式行定义。
grid-template-columns 怎么写才能适配不同屏幕
直接用固定列数（比如 grid-template-columns: repeat(4, 1fr)）在小屏上会挤成一团，必须配合媒体查询动态改列数或轨道尺寸。关键不是“加 media query”，而是让 grid-template-columns 的值本身具备响应性——优先用 minmax() + auto-fit/auto-fill 组合，再用媒体查询兜底。
常见错误是只在 @media 里改列数但忽略行间距、gap 或子项最小宽度，导致换行错乱。建议统一用 minmax(280px, 1fr) 这类带下限的定义，再配合 grid-auto-flow: dense（可选）处理空缺。
-
auto-fit会收缩空轨道，auto-fill保留空轨道，多数场景用auto-fit - 小屏（
max-width: 480px）建议强制单列：grid-template-columns: 1fr - 中屏（
481px–768px）可用双列：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) - 大屏再放开到 3–4 列，但别硬写
repeat(4, 1fr)，仍用minmax()控制单列最小宽度
gap 和子项 margin 混用会导致布局偏移
gap 是网格容器的属性，它控制的是网格线之间的空隙；而给子项加 margin 会破坏网格对齐，尤其在 auto-fit 下容易触发额外换行或空白轨道。调试时如果发现列数没按预期变化，先检查是否误加了 margin。
正确做法是：所有间距统一走 gap，子项内部用 padding；若需某侧无间隙（比如首项靠左、末项靠右），用 :first-child / :last-child 配合 margin 微调，但仅限边缘。
立即学习“前端免费学习笔记（深入）”；
- 横向间距用
column-gap，纵向用row-gap，比写gap: 1rem更可控 - 避免在子项上写
margin: 1rem—— 容易和gap叠加，造成双倍空白 - 如果子项有边框或阴影，用
box-sizing: border-box防止溢出
媒体查询里改 grid-template-rows 容易失效
多数情况下不需要动 grid-template-rows，因为网格默认是“行由内容撑开”的（auto 行高）。强行设死高度（如 100px）或用 repeat(3, 1fr) 反而会让小屏内容被截断。真要控制行高，优先用 grid-auto-rows: minmax(100px, auto)，它只影响自动创建的行，不干扰显式定义的行。
只有当需要固定头部/底部+滚动中间区时，才考虑 grid-template-rows: 60px 1fr 80px 这类定义，并配合 @media 调整各部分比例（比如小屏把头部压缩到 48px）。
- 不要在媒体查询里重写整个
grid-template-rows，除非你明确知道每行内容高度范围 - 用
grid-auto-rows替代显式行定义，更适应内容变化 - 如果用了
1fr行，注意父容器必须有明确高度（比如min-height: 100vh），否则1fr无效
IE 不支持 auto-fit/auto-fill，得单独处理
IE10/11 完全不识别 auto-fit 和 auto-fill，会直接忽略整条 grid-template-columns 声明，退回到浏览器默认流式布局。如果项目还要兼容 IE，不能只靠 Grid，得用 @supports 包一层，或者用浮点/Flex 回退。
最简回退方案：用 @supports not (grid-template-columns: repeat(auto-fit, 1fr))) 包住 Grid 布局，里面再写一套 Flex 或 float 的备用样式。不过现在多数项目已放弃 IE，重点反而是 Safari 旧版本对 minmax() 的解析差异——iOS 10.3 之前不支持 minmax(min-content, 1fr)，得降级为 minmax(280px, 1fr)。
- 别用
@media判断 IE，要用@supports检测具体特性 - Safari 9–10.2 对
minmax()支持有限，避免用min-content或max-content - 如果必须兼容 IE，Grid 只能用于现代浏览器增强，主逻辑还得靠 Flex 或 JS 计算列数
grid-auto-flow 的默认值（row）和内容顺序的关系——当列数变化时，DOM 顺序和视觉顺序可能不一致，尤其搭配 order 使用时。这点没有银弹，只能靠真实设备多测。 
