fr单位实现自适应需避免混用px，推荐repeat(auto-fit, minmax(250px, 1fr))；grid-template-rows应设auto或minmax(min-content, max-content)防截断；gap统一控间距更可靠；grid-area配合媒体查询重排区域可保持dom顺序。
grid-template-columns 用 fr 单位替代固定像素
固定列宽（比如 200px 或 30%）在小屏上必然导致内容挤压或横向滚动，fr 是 grid 的弹性单位，表示“剩余空间的份数”。它天然适配不同容器宽度，无需媒体查询就能实现基础自适应。
常见错误是混用 fr 和 px 时没留出足够间隙：比如 grid-template-columns: 200px 1fr 2fr，当容器窄于 200px 时第一列会强制撑开，触发滚动。应优先让所有列都参与弹性分配。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) -
auto-fit会让空轨道收缩，auto-fill则保留空轨道，响应式中一般选auto-fit -
minmax(250px, 1fr)表示每列最小 250px，最大占满可用空间的一份
@media 中修改 grid-template-rows 要谨慎
很多人以为只改列就够了，但行高写死（如 grid-template-rows: 100px 100px）会导致小屏下内容被截断。真正需要响应式的不是“行数”，而是“行高是否随内容伸缩”。
关键判断点：如果内容高度不可控（比如图文卡片），grid-template-rows 应设为 auto 或用 minmax(min-content, max-content)，避免强制裁剪。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
grid-template-rows: 150px 150px→ 小屏文字换行后溢出 - 安全写法：
grid-template-rows: repeat(2, minmax(min-content, max-content)) - 若需等高卡片，用
align-items: stretch配合grid-auto-rows: minmax(200px, auto)
gap 比 margin 更可靠地控制网格间距
用子元素 margin 控制网格项间距，容易在换行/重排时产生意外空白（比如最后一行右边多出 margin），且无法统一控制行列间隔。而 gap 是网格容器级属性，专为此设计。
注意：IE 不支持 gap，如需兼容，得回退到 margin + :nth-child 排除逻辑，但现代项目基本可忽略 IE。
- 统一设置：
gap: 1rem（等效row-gap: 1rem; column-gap: 1rem） - 行列不同：
row-gap: 1.2rem; column-gap: 0.8rem - 避免和
padding混用导致内边距叠加，容器padding应单独考虑留白需求
grid-area 配合媒体查询做区域重排
纯靠 grid-template-columns 只能调整列数，真正灵活的响应式需要改变模块顺序或跨区方式——比如桌面端侧边栏在右，移动端移到顶部。这时不能只靠 order，要用 grid-area 配合不同断点下的 grid-template-areas。
重点在于命名区域要语义化且稳定，不要用 a、b 这类临时名，否则断点一多就难以维护。
/* 移动端单列 */
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
<p>/<em> 平板及以上双列 </em>/
@media (min-width: 768px) {
.container {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
}每个 grid-area 值必须和 grid-template-areas 中的字符串完全一致，大小写和空格都不能错；漏写某个区域名，对应元素会失效。
复杂布局里，区域重排比单纯调列数更耗脑力，但它是唯一能保持 DOM 顺序不变、仅靠 CSS 改变视觉流的方式——这点对可访问性和 SEO 很关键。
