grid-template-columns必须配合display: grid或inline-grid才生效，否则被浏览器忽略；常见错误是仅设置该属性而遗漏display声明，导致子元素仍垂直堆叠。
grid-template-columns 必须配合 display: grid 才生效
只写 grid-template-columns 不会触发网格布局，浏览器完全忽略它。必须先给父容器设置 display: grid 或 display: inline-grid，这是开启 Grid 上下文的开关。
常见错误现象：写了 grid-template-columns: 1fr 1fr，但子元素还是垂直堆叠——八成是漏了 display: grid。
- 子元素若用了
float、position: absolute或display: inline-block，也会脱离 Grid 流，导致列定义失效 -
display: grid只影响直系子元素，孙级及更深层不会自动继承网格行为 - 如果用 Flexbox 混搭 Grid，注意父容器不能同时设
display: flex和display: grid，后者会覆盖前者
两列布局最稳妥的写法是 240px 1fr 而不是 1fr 1fr
等宽两列（grid-template-columns: 1fr 1fr）适合卡片列表或对称内容；但做页面主结构（如侧边栏+主内容）时，固定左栏 + 弹性右栏更可控。
grid-template-columns: 240px 1fr 的实际效果是：左侧占满 240px，右侧自动填满剩余空间（扣除 gap 后）。
- 避免用百分比（如
20% 80%），子元素若有min-width容易撑破容器 - 想让左栏有弹性范围？改用
minmax(200px, 300px) 1fr，既防压缩又防过宽 - 不要依赖
auto-fit或auto-fill实现两栏，它们更适合动态数量的项目，两栏场景下反而引入冗余逻辑
响应式切换时，别只改 grid-template-columns
在媒体查询里仅重置 grid-template-columns 是常见疏漏。窄屏下单列虽能显示，但若没同步调整 gap、子项 margin 或 padding，可能造成横向溢出或留白异常。
例如桌面端：grid-template-columns: 240px 1fr; gap: 24px;；移动端应配套：
.container {
grid-template-columns: 1fr;
gap: 16px;
}
.container > * {
margin: 0;
}
- 用
grid-template-areas配合媒体查询更直观，比如从"sidebar main"改为"sidebar" "main" - 避免在不同断点间混用单位类型（如桌面用
px，移动端突然切rem），容易导致计算偏差 - 测试时重点看子元素是否被意外拉伸——
1fr在单列下会占满全宽，若子项含width: 100%可能触发双倍宽度
fr 单位不是“百分比”，它按剩余空间等分
1fr 不等于 50%。它代表“可用空间减去所有固定尺寸轨道和 gap 后，再均分的一份”。这意味着 1fr 2fr 实际是 1/3 和 2/3，而非 1/2 和 2/2。
典型陷阱：设了 grid-template-columns: 200px 1fr 1fr，结果右边两列加起来还没左边宽——因为 1fr + 1fr 分的是“总宽 - 200px - gap”，不是总宽的一半。
- 需要精确比例控制时，优先用
repeat()，如repeat(3, 1fr)比手写1fr 1fr 1fr更少出错 -
minmax()是 fr 的安全搭档，minmax(min-content, 1fr)能防止内容被过度压缩 - 调试时打开浏览器开发者工具的“网格叠加层”（Grid Overlay），能直接看到轨道划分是否符合预期
真正卡住人的往往不是语法记不住，而是 display: grid 没加、fr 被当成百分比理解、或者响应式时只动了列数却忘了间隙和子项约束。这些地方一错，整个布局就静默失效，很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
