只写 display: grid 无视觉变化，因子项默认堆在首个单元格；需配合 grid-template-columns/rows 划分轨道或 grid-auto-flow 触发自动填充。
直接给容器加 display: grid 就开启了网格布局，但只写这一行几乎没用——真正起作用的是后续的列行定义、间距控制和子项定位。很多人卡在“写了 grid 却没效果”，其实是漏掉了 grid-template-columns 或默认子项未显式分配位置。
为什么只写 display: grid 看不出变化
因为网格容器默认会把所有子项堆在第一个单元格（即 grid-column: 1 / 2; grid-row: 1 / 2），视觉上就像普通块级流。必须显式划分轨道或用 grid-auto-flow 触发自动填充。
- 不设
grid-template-columns时，列数为 1，宽度由内容撑开（不是“自适应”） - 不设
grid-template-rows时，行高也是auto，不会均分高度 - 若子项数量超过 1 且未指定位置，
grid-auto-flow: row（默认）会让它们从左到右、换行排列，但前提是列轨道已存在
grid-template-columns 和 grid-template-rows 怎么配才合理
这两个属性决定网格骨架，单位混搭是常态，关键看场景需求：
- 等宽三列：用
grid-template-columns: repeat(3, 1fr)，比写1fr 1fr 1fr更易维护 - 固定侧边栏 + 自适应主内容：用
grid-template-columns: 240px 1fr，注意1fr不是百分比，而是剩余空间的 1 份 - 响应式列数切换：配合媒体查询，比如小屏
grid-template-columns: 1fr，大屏grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) -
auto值适合内容驱动的高度（如标题行），minmax(100px, auto)能限制最小高度又允许撑高
子项定位别只靠 grid-column 和 grid-row
手动写 grid-column: 2 / 4 虽然精准，但容易错位、难复用。更推荐组合策略：
- 用
grid-area配合grid-template-areas命名区域，语义清晰，HTML 结构可读性高 - 对齐类操作优先用
justify-self/align-self（单个子项）或justify-items/align-items（全部子项） - 需要居中整个网格内容时，
place-items: center比分别写justify-items和align-items更简洁 - 避免对子项设
width/height，尤其当用了fr单位——它会覆盖轨道分配逻辑
gap 和 grid-auto-flow 是高频踩坑点
很多人用 margin 给子项加间隔，结果破坏网格对齐；也有人发现子项“跳着排”，其实是 grid-auto-flow 的行为没理解清楚：
-
gap（或旧名grid-gap）只作用于网格单元之间，不影响容器外边距，也不影响子项内边距 -
grid-auto-flow: dense会尝试填满空缺，但可能打乱 DOM 顺序，慎用于可访问性要求高的区域 - 列数多但子项少时，
grid-auto-flow: column可能导致横向溢出，需配合overflow-x: auto或媒体查询约束 -
row-gap和column-gap可单独设置，比gap更灵活，比如只留垂直间隙
真正难的不是语法，而是判断什么时候该用 fr、什么时候该用 minmax()、什么时候放弃自动流改用手动 grid-area —— 这取决于内容是否稳定、是否要适配屏幕、是否有语义区块。别试图一套配置打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
