CSS Grid 的 grid-template-areas 是实现语义化磁贴布局最直观的方式，适合结构明确场景；需严格遵循命名规则、对齐字符串，并配合 grid-column/grid-row 精确控制跨区，响应式应全量重写 areas 而非局部调整。
Grid 中用 grid-template-areas 定义磁贴区域最直观
磁贴（Masonry / Tile）效果本质是把内容块按语义区域“钉”在固定位置，不是靠 JS 算高度错位。CSS Grid 的 grid-template-areas 是最贴近设计意图的写法，尤其适合后台仪表盘、卡片式导航这类结构明确的场景。
常见错误是试图用 float 或 inline-block 模拟，结果响应式一换就错位；或者滥用 grid-auto-flow: dense 配合 span，导致可访问性下降、打印样式混乱。
- 每个区域名必须用引号包裹，且每行字符串长度要对齐（空格也算字符），否则整个声明失效
-
grid-area值必须和grid-template-areas中定义的名称完全一致，大小写敏感 - 区域名不能含短横线（
-）或数字开头，header可以，tile-1会静默失败
display: grid; grid-template-areas: "header header header" "nav main main" "nav aside footer";
用 grid-column 和 grid-row 手动控制单个磁贴尺寸
当磁贴需要跨行/跨列（比如一个大图占两行三列），grid-column 和 grid-row 比 grid-area 更灵活，也更易维护——改一个值不影响其他区域命名。
容易踩的坑是混淆起始线编号：Grid 线从 1 开始计数，grid-column: 2 / 4 表示从第 2 条线到第 4 条线，实际占 **2 列**（列轨道 2 和 3），不是“到第 4 列为止”。
立即学习“前端免费学习笔记（深入）”；
- 负值从末尾反向计数：
grid-column: -3 / -1表示最后两列 - 用
span关键字更安全：grid-column: span 2不依赖线编号，响应式重排时更稳 - IE11 不支持
span关键字，若需兼容，得写死线号（如grid-column: 2 / 4）
响应式磁贴布局必须用 @media 重定义 grid-template-areas
别指望用 grid-auto-fit + minmax() 搞出真正的磁贴效果——那只是等宽自适应栅格，不是你想要的「左上角大卡片+右下角小工具」那种不规则感。
真正可控的响应式磁贴，是在不同断点里写多套 grid-template-areas，配合 display: none 隐藏不需要的区块。这样语义清晰、打印友好、屏幕阅读器也能正确遍历。
- 移动端优先：先写窄屏布局（如单列堆叠），再用
@media (min-width: 768px)覆盖桌面版 - 避免在媒体查询里只改某几个区域，全量重写
grid-template-areas字符串，防止遗漏或错位 - Chrome DevTools 的 Layout 面板能高亮显示每个
grid-area对应的区域，调试时直接开它
磁贴内容溢出时，overflow 和 min-height 必须配对设
磁贴区域大小由 Grid 容器决定，但内部内容（比如长文本、图片）可能撑破边界。只设 overflow: hidden 会裁剪内容，只设 min-height 又会让区域高度不一致——破坏磁贴的“吸附感”。
关键点在于：给磁贴容器设 min-height 保底，再用 overflow: hidden 或 text-overflow: ellipsis 控制内容溢出，二者缺一不可。
- 不要用
height: 100%，Grid 子项默认不继承父容器高度，会失效 - 图片用
object-fit: cover配合固定宽高比，避免拉伸变形 - 文字截断需配合
white-space: nowrap和display: block，text-overflow: ellipsis才生效
磁贴布局的复杂点不在 Grid 语法本身，而在于设计稿里的“视觉权重”怎么映射成代码里的区域划分——比如一个强调区块该占几行几列、是否允许被其他磁贴挤走、在小屏上降级成什么形态，这些都得提前和产品对齐，不然写完才发现语义错位，返工成本远高于写 CSS。
