grid布局必须用display: grid，因父容器默认block导致grid-template-columns等失效；inline-grid破坏宽度，flex则完全错误；grid-template-areas需严格匹配grid-area值；响应式推荐auto-fit+minmax；跨列跨行用span更可靠。
Grid 布局必须用 display: grid，不是 display: inline-grid 或 flex
绝大多数初学者卡在第一步：容器没设对显示模式。仅写 grid-template-columns 不生效，因为父容器默认是 display: block。必须显式声明 display: grid ——inline-grid 会破坏宽度占满行为，flex 则完全走另一套逻辑，混用会导致网格项塌缩或错位。
常见错误现象：grid-column 和 grid-row 完全不起作用，控制台也无报错；网格项横向堆成一行，无视 grid-template-areas 定义。
- 确认父容器（比如
<main></main>或<div class="grid-container">）设置了 <code>display: grid - 避免在同一个元素上同时写
display: grid和display: flex（后者会覆盖前者） - 调试时可在 DevTools 中检查 computed 样式，确认
display确实为grid -
grid-area值不能含空格或特殊字符，只接受字母、数字、短横线（如hero-section可以，hero section不行） - 模板中某处写成
"header headr sidebar"（拼错），对应区域就永远空白 - 如果某子元素没设
grid-area，它不会自动填入空缺位置，而是按源顺序 fallback 到剩余网格单元 - 优先用
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))))，不是auto-fill（后者会生成不可见的空列） - 避免在
minmax()里写px和%混用，容易导致计算冲突；统一用rem或视口单位更可控 - Chrome 110+ 支持
subgrid，但目前 Safari 对subgrid的支持仍不完整，生产环境慎用 - 跨列推荐写
grid-column: span 2（明确跨度），比2 / 4更不易错 - 想撑满所有显式行，用
grid-row: 1 / -1前，先确认容器设置了grid-template-rows（否则隐式行数不确定） - 当网格项内容高度超出设定行高时，
grid-row-start仍按线定位，但实际渲染可能被内容撑开——此时需配合align-items或overflow控制
grid-template-areas 要求所有区域名严格匹配子元素的 grid-area
这是最常出错的语义断点。定义 grid-template-areas 时写的字符串（如 "header header sidebar" "main main sidebar"），每个单词都必须对应某个子元素的 grid-area 值——拼写、大小写、空格数，一个都不能差。
使用场景：适合语义化布局（如页头、主内容、侧边栏、页脚），比纯行列定位更易维护，但容错率极低。
响应式 Grid 要靠 grid-template-columns 配合 minmax() 和 auto-fit
固定列数（如 grid-template-columns: 1fr 1fr 1fr）在小屏上必然溢出。真正实用的响应式写法依赖函数组合，而不是媒体查询硬切。
性能影响：用 auto-fit + minmax(300px, 1fr) 比写 3–4 组 @media 更轻量，浏览器动态计算列数，且不触发重排。
Grid 项跨行跨列时，grid-row 和 grid-column 的范围写法容易反直觉
grid-column: 2 / 4 表示“从第 2 条线开始，到第 4 条线结束”，即跨越第 2、3 两列（不是 2 到 4 共三列）。这个“/”前后都是**线号**，不是列索引。
容易踩的坑：以为 grid-row: 1 / -1 能撑满全部行，结果发现最后一行没被覆盖——因为 -1 指的是最后一根**隐式线**，而显式定义的行数之外的区域属于隐式网格，行为不稳定。
复杂点在于：Grid 的线模型和盒模型叠加后，视觉边界和逻辑坐标并不总是一致。调 layout 时，打开 Chrome DevTools 的“Layout”面板，勾选“Show line numbers”，能立刻看清每条线的位置。
