grid-template-columns 和 grid-template-rows 需显式定义行列并确保父容器有明确宽高，否则隐式轨道和 fr 单位失效导致布局塌陷；repeat() 更安全，fr 依赖可用空间，嵌套时需逐层确认高度来源。
grid-template-columns 和 grid-template-rows 怎么写才不踩坑
这两个属性是 Grid 的骨架，写错一个值，整个布局就偏移或塌陷。关键不是“怎么写对”，而是“怎么写才不被隐式轨道干扰”。
常见错误现象：grid-template-columns: 1fr 2fr 看起来没问题，但父容器没设 height，grid-template-rows 又没定义——结果子元素高度为 0，内容溢出看不见。
- 显式定义行列时，只控制“显式网格”，未定义的区域会由浏览器自动创建隐式轨道（
grid-auto-rows/grid-auto-columns管理），别指望它按你直觉扩展 -
fr单位只在有明确可用空间时才生效；如果父容器height: auto且子项无高度约束，1fr会算成 0 - 用
repeat(3, 1fr)比手写1fr 1fr 1fr更安全，避免空格/换行引发解析失败
justify-items 和 align-items 到底影响谁
它们不控制网格容器自身位置，而是控制所有直接子项（即网格项）在各自单元格内的对齐方式。很多人以为能靠它把整个网格居中，结果白调半天。
使用场景：表单字段标签右对齐、卡片内图标垂直居中、数据表格单元格文字底部对齐。
立即学习“前端免费学习笔记（深入）”；
-
justify-items控制**行内**对齐（start / end / center / stretch），默认 stretch —— 这意味着子项会拉满单元格宽度，除非它自己设了width -
align-items控制**行方向**对齐（同上取值），同样默认 stretch；若子项是图片或按钮，可能被意外撑高 - 想让整个网格容器居中？得在外层容器上用
display: flex+justify-content，不是在这俩属性上折腾
grid-area 命名区域和 line-based 定位混用时的冲突点
一旦同时用了 grid-template-areas 和 grid-column-start 这类线定位，浏览器优先以线定位为准，命名区域会被绕过——但错误不会报，页面只是“看起来不对”。
典型表现：明明写了 "header header header"，某个标题却跑到第二行去了。
- 命名区域适合整体结构稳定、语义清晰的布局（如页眉/主区/侧栏）；线定位适合动态插入、需精确控制起止线的元素（如弹窗、工具条）
- 二者不要交叉使用在同一元素上；如果用了
grid-area: sidebar，就别再给它加grid-row: 2 / 4 - 调试时用浏览器开发者工具的 Grid 面板，勾选“Show line numbers”，一眼就能看出实际占用哪几根线
Grid 在 Flexbox 已经够用的情况下，什么时机必须切 Grid
不是“更先进就要用”，而是当布局需要**行列双向强约束**时，Flexbox 开始吃力：比如响应式仪表盘、多维筛选表格、带固定行列头的 Excel 式表格。
性能影响很小，但兼容性要注意：IE11 支持 Grid 但语法不同（-ms-grid），而现代项目基本已放弃支持。
- Flexbox 是一维的：要么排成一行，要么排成一列；Grid 天然二维，可同时声明行高和列宽，并独立控制每项的行列跨度
- 用
grid-auto-flow: dense能让空缺被自动填充，Flexbox 做不到这点 - 媒体查询里改
grid-template-areas比用 Flex 的order+ 多重flex-wrap更直观，尤其涉及 3+ 区域重排时
真正容易被忽略的是：Grid 的隐式轨道行为在复杂嵌套中会层层叠加，父 Grid 的 grid-auto-rows 不会影响子 Grid，但子 Grid 若没设 height，它的子项又用 1fr，就会再次归零。这种嵌套 fr 计算，得一层层确认可用空间来源。
