grid-template-areas比grid-column更稳，因其将布局定义为可读字符串矩阵，自动推导行列跨度，避免手动线号定位导致的跨行错位与响应式崩塌；区域名唯一绑定、重复自动合并，天然适配不等高内容。
grid-template-areas 为什么比 grid-column 更稳
不等高拼图最怕跨行错位、响应式下布局崩塌，grid-template-areas 把布局画成字符串矩阵，人眼可读、改起来不牵连。比如写 "header header sidebar" "main main sidebar" "footer footer footer"，浏览器会按语义自动推导每块该占几行几列，哪怕某块内容变高，只要区域名没变，整个结构就不偏移。
而用 grid-column: 1 / 3; grid-row: 1 / 4 这类线号定位，一旦中间加了一行标题或删了一个区块，所有后续项的行列线编号全乱——尤其在 CMS 动态渲染或 JS 插入新卡片时，debug 成本极高。
-
grid-template-areas中每个区域名只能对应一个元素，重复出现自动合并为连续块，天然支持不规则高度 - 区域名必须是纯小写字母或短横线（如
hero、feature-card），不能含空格或数字开头 - 未被引用的区域名（比如写了
"a b c"但没元素设grid-area: b）会留空，不影响渲染，调试时反而容易发现漏绑元素
minmax() + aspect-ratio 是图片不等高的关键
单纯靠 grid-template-rows: auto 会让图片撑开各行高度，破坏拼图对齐。真正起作用的是组合：给网格项（不是 <img>）设 aspect-ratio，再让图片填满。
例如：.card { aspect-ratio: 4 / 3; }，然后 img { width: 100%; height: 100%; object-fit: cover; display: block; }。这样即使原始图宽高比不同，容器也强制保持比例，不会拉伸也不会留白。
立即学习“前端免费学习笔记（深入）”；
- 别单独给
<img>设height—— 不同图原始尺寸差异大，会导致网格行高不一致 -
object-fit: cover失效？90% 是因为父容器没高度上下文，aspect-ratio就是解药 - 如果内容区需要文字+图片混合，用
minmax(200px, 1fr)替代纯1fr，保证最小可用空间，避免文字被压扁
gap 要用，margin 别碰
网格间距必须用 gap，不是 margin。后者在不等高场景下会触发外边距合并、首尾漏间隙，而且响应式切换列数时，最后一行 margin 无法自动重算，必然错位。
gap: 12px 一行就同时控制行列间距，不塌陷、不重排、滚动性能好。旧版 Safari 可加回退 grid-gap: 12px。
- 容器有
padding: 16px？别把gap改成8px来“视觉对齐”——那会让图片离边框太近，实际留白不一致 - 某项要加浮层遮罩？用
position: absolute，它自动脱离网格流，不参与gap计算，不用额外清除 - 动态增删卡片时，
margin行为完全不可控；gap原生支持，稳
响应式不等高拼图怎么不崩
别在媒体查询里反复重写 grid-template-areas —— 它不支持部分覆盖，一换就全丢。正确做法是：保持区域名不变，只调轨道尺寸。
比如小屏竖排：@media (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-rows: auto; } }；中屏两栏：grid-template-columns: 2fr 1fr；大屏三栏加固定头尾：grid-template-rows: 80px auto 60px。区域名还是 header、main、sidebar，只是它们“住”的格子变宽变窄了。
- 绝对不要对
grid-area做媒体查询切换——它不是响应式属性，改了等于重新布局，JS 注入时易冲突 -
auto-fit必须用，auto-fill在小屏下会保留空轨道，导致右侧大片留白甚至横向滚动 - 复杂点在于：当某块内容高度突变（比如展开详情），
grid-auto-rows会动态分配，但需配合overflow: hidden防溢出，否则破坏整体拼图感
