直接写display: grid不会自动出格子，必须手动定义grid-template-columns等轨道，否则子元素堆在左上角；grid-column无效是因为网格线不存在，而非语法错误；调试应先加border确认容器渲染，再补轨道定义。
直接写 display: grid 不会自动出格子，必须手动定义列线和行线，否则所有子元素堆在左上角第一格里，看着跟普通块级流完全一样。
为什么写了 grid-column 却没效果
根本不是语法错，而是网格线压根不存在——display: grid 只是开启上下文，不生成任何轨道。浏览器不会凭空推断“该分几列”。
-
grid-template-columns缺失是最常见原因；没它，grid-column: 1 / 3中的线号 1/2/3 全部无效，浏览器静默忽略 - 父容器宽度为 0（比如空 div、未设
width或max-width、被float或position: absolute挤出文档流），轨道直接塌陷 - 调试时最省事的办法：给容器加
border: 1px solid red，再看有没有列被渲染出来；没有？立刻补grid-template-columns
grid-template-columns 怎么写才真正响应式
别用 1fr 1fr 1fr 这类固定列数写法，小屏下卡片会被压成窄条，大屏又留大片空白。关键不是“等分”，而是“最小可用 + 弹性伸缩”。
- 起步推荐：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 每列至少 280px，超出部分均分剩余空间 -
auto-fit会折叠空轨道，避免右侧留白；auto-fill则保留空槽，日常几乎不用 - 混用单位是典型陷阱：比如
50% 1fr，百分比基准不确定，容易错位；1fr auto会让auto项撑满全部剩余空间，失去预期行为 - 侧边栏 + 主内容这类混合布局，用
250px 1fr比媒体查询更轻量，也更易维护
用 gap 而不是 margin 控制间距
给每个网格项写 margin-right 或 margin-bottom 是过时做法，会导致最后一行/列多出空白、换行错位，还可能触发 margin collapse。
- 正确做法：统一在容器上设
gap: 16px（旧名grid-gap已废弃，无需前缀） -
gap只作用于项目之间的空隙，不影响外边距逻辑，对display: inline-grid同样有效 - 如果某项目用了
position: absolute，它将不参与gap计算 - 所有主流浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）已原生支持，无需兼容处理
真正卡住人的从来不是语法记不住，而是忘了：网格线得手动画出来，gap 得代替 margin，而 display: grid 本身不等于“有格子”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
