网格容器不生效的根本原因是父元素未被识别为Grid容器，必须显式设置display: grid或inline-grid，并确保其有宽度、处于常规文档流中，否则grid-template-columns等属性将被忽略。
网格容器不生效，90% 是因为没真正创建它——display: grid 必须加在父元素上，且该父元素得有宽度、在常规文档流里。
为什么 grid-template-columns 写了却没反应
不是语法错，是容器根本没被识别为网格容器。浏览器会直接忽略所有子项的 grid-column、grid-row 等属性。
-
display: grid或display: inline-grid必须显式写在父元素上，不能只写在子元素或靠继承 - 父容器宽度为
0（比如空<div>、未设width/max-width、父级也无宽）会导致轨道塌陷，看着像“没效果” - 父容器用了
float、position: absolute、display: contents会脱离常规文档流，Grid 无法计算轨道 - 调试时直接看开发者工具的 Computed 面板：确认
display是grid，且grid-template-columns有实际计算值
grid-template-columns 怎么选单位才不翻车
用错单位组合会导致列宽错乱、换行异常、响应式失效。fr 和 % 混用、fr 和固定值混搭都容易出计算歧义。
- 等分布局优先用
repeat(3, 1fr)，别写33.33% 33.33% 33.34%——后者只为堵 IE11 浮点误差，现代浏览器用fr更稳 - 响应式卡片墙用
repeat(auto-fit, minmax(280px, 1fr))：auto-fit合并空轨道，minmax()保证最小宽度不压缩内容 - 侧边栏+主内容布局写成
200px 1fr，别写200px 1fr 0fr或200px 75%——fr和%在同一行里会触发不同计算逻辑 - 固定列 + 弹性列组合时，避免
100px 1fr 200px这种写法；若第三列也要弹性，改用100px 1fr minmax(200px, 1fr)
grid-column 定位时线号和跨距怎么算才不懵
线号从左到右、从上到下编号，但 1 / -1 这种写法比数线更可靠，尤其列数可能动态变化时。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 2 / 4表示从第 2 条线开始、到第 4 条线结束（即跨 2 列），不是“占第 2 和第 4 列” -
grid-column: 1 / -1是横跨全部列的最简写法，不受预设列数影响，比span 12或1 / 13更鲁棒 - 用了
grid-template-areas命名区域后，就别再给同一元素加grid-column—— 后者会覆盖前者，且调试时很难发现 -
grid-row: span 2等价于grid-row: auto / span 2，语义更清晰，不用记起始线号
嵌套 Grid 容器要注意什么
可以嵌套，但每一层都得独立满足网格容器条件。外层是 Grid，内层想用 Grid 就必须再写一遍 display: grid。
- Flex 容器里嵌 Grid 容器完全没问题，但 Grid 容器里用
justify-content控制子项对齐无效——那是 Flex 的属性，Grid 用justify-items或justify-self - 嵌套时，内层容器的
grid-template-columns不受外层影响，但它的宽度由外层分配的格子决定，所以要留意外层是否给了足够空间 - 如果内层 Grid 容器内容为空或高度为
0，即使写了display: grid，它的轨道也可能塌陷，导致子项定位失败 - 不要为了“统一栅格系统”强行让所有容器都套 Grid，Grid 和 Flex 各司其职：Grid 管二维结构，Flex 管一维排列
真正难的不是写对哪一行代码，而是判断当前这个 <div> 到底有没有被浏览器当成网格容器——所有问题都从这里开始，也在这里终结。
