非对称网格本质是放弃自动排列，为每个 grid-item 单独设置 grid-row/grid-column 起止线；浏览器硬放置，不校验重叠、留空或越界。
用 grid-row 和 grid-column 精确控制每个格子位置
非对称网格的本质，不是靠 grid-template-areas 画大区块，而是放弃自动排列，给每个 grid-item 单独设起止线。浏览器按你写的行号列号硬放，不校验是否重叠、留空或越界。
实操建议：
-
grid-row: 2 / 4表示从第 2 条横线开始、到第 4 条横线结束（含第 2 行、第 3 行）；写成grid-row: 2 / -1也能跨到底部，但得确认容器有足够行线 - 列方向同理，
grid-column: 1 / span 3比写死终点更安全，尤其当列数可能变化时 - 别依赖
grid-auto-flow: dense去“填空”——它只对自动放置生效，手动指定坐标后完全失效 - 用
grid-line名称（如grid-column: start / wide-end）比纯数字可读性高，但需先在容器上定义grid-template-columns: [start] 1fr [mid] 2fr [wide-end] 1fr
为什么 grid-template-areas 不适合真正非对称布局
它要求所有区域名在每行都出现且对齐，本质是“命名的矩形块”，一旦想让某个项斜跨、L 形、或中间挖空，就会报错或强制拉伸变形。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写
grid-template-areas: "a b . c" "a d d c"，第二行a试图向上延伸，但 CSS 规范禁止跨行同名区域——浏览器直接忽略该行定义，退回到默认流 - 用
.表示空单元格，但整行全是.时，该行高度塌陷为 0，后续区域整体下移，视觉错乱 - 区域名不能含短横线或数字开头，
"hero-banner"合法，"1-hero"会静默失败
响应式下手动坐标的维护成本和替代思路
一套 grid-row/grid-column 值在小屏大概率错位甚至溢出。与其写多套媒体查询覆盖全部坐标，不如分层处理。
使用场景与取舍：
- PC 端坚持手动坐标，用
@container（配合container-type: inline-size）做局部调整，比全局@media更精准 - 移动端直接切回
display: flex或display: block，用order控制顺序，放弃位置精确性换可维护性 - 若必须保持 grid，优先用
span而非绝对终点，例如grid-column: 2 / span 2比grid-column: 2 / 4在列数变化时更鲁棒 - 避免在同一个容器里混用自动放置项（无坐标）和手动坐标项——自动项会无视已占位置，强行塞进剩余空间，导致重叠
调试时怎么看实际渲染出的网格线
Chrome DevTools 的 Layout 面板勾选 “Show line names” 只显示你定义的命名线，不显示隐式生成的线号。真正要看每个项卡在哪几条线之间，得靠计算 + 验证。
实操建议：
- 在容器上加
outline: 1px solid red，再给每个grid-item加outline: 1px dashed blue，能直观看出是否贴边、重叠或悬空 - 临时把
grid-row-start改成grid-row: auto / auto，观察该项是否回归自动流位置——如果没变，说明原本的坐标其实没生效（比如行线数不够） - 用
getComputedStyle(el).gridRowStart查 JS 中解析后的值，注意它返回字符串如"2"或"span 3"，不是数字，别直接参与运算
手动坐标的自由度很高，但代价是每个格子的位置都成了独立变量，改一个常要连带调周边。最易被忽略的是隐式网格轨道的尺寸——没显式定义 grid-template-rows 时，浏览器按内容撑开，而内容高度又受字体、行高、padding 影响，最终坐标偏移往往源于这一层“看不见的弹性”。
