grid-template-areas 不能拼 L 形磁贴，因其要求同名区域必须构成连续闭合矩形；写了 "a a b" "a c b" 时 a 只渲染第一行，第二行被忽略且无报错；L 形、T 形等需改用 grid-column 和 grid-row 显式跨距实现。
grid-template-areas 只能拼矩形，L 形、T 形、凹形磁贴必须用 grid-column 和 grid-row 手动跨距实现。
为什么 grid-template-areas 不能拼 L 形磁贴？
它要求同名区域必须构成连续闭合矩形——这是 CSS 规范硬性限制，不是浏览器 bug。写了 "a a b" "a c b" 想让 a 占左上两格 + 左下第一格（L 形），结果 a 只渲染在第一行，第二行被忽略；控制台无报错，但布局完全错乱。
实操建议：
- 画草图时先圈出所有要合并的区域，确认它们是否行列索引连续、能围成完整矩形
- 真需要 L 形、T 形、五边形等，放弃
grid-template-areas，改用grid-column: span 2+grid-row: span 2等显式跨距 - 用
.占位空单元格，但必须保证每行字符串长度一致，否则整条声明失效
怎么用 grid-column/grid-row 实现 Metro 风磁贴？
Windows 磁贴本质是固定比例单元格 + 合并行列，Grid 天然支持跨距。关键不是“区域名”，而是线号锚定和跨度控制。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定义统一轨道：
grid-template-columns: repeat(4, 1fr)，gap: 8px - 按尺寸设跨度：
.tile.medium { grid-column: span 2; grid-row: span 1; }，.tile.large { grid-column: span 2; grid-row: span 2; } -
span值必须为整数，不能写span 1.5；若需响应式，在@media中重设grid-template-columns即可 - 避免混用
flex-basis和width，磁贴宽度统一用grid-column: span N控制，更可靠
clip-path 能让磁贴变六边形或斜切吗？
能，但必须加在每个子项上，而不是网格容器上。加在容器上只裁视觉，不改布局——子项仍按原始矩形网格线排列，超出部分只是“看不见”，hover 和点击照常触发。
实操建议：
- 做六边形磁贴：每个子项设
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) - 列宽固定（如
200px），行高设为1.1547 * 200px（即 √3 × 宽度），保证正六边形比例 - 对偶数行子项加
transform: translateX(50%)错位，制造蜂窝感 - 注意坐标系：默认以 border box 为原点，若有
padding或border，polygon()坐标需手动偏移，否则内容可能被裁掉一半
动态添加磁贴时怎么避免跳动？
Grid 的自动填充机制比 Flex 更稳定。新增元素直接 append 到容器，Grid 自动按顺序填入下一个空位，无需计算位置；而 Flex 在插入新 item 时可能触发整行重排。
实操建议：
- 拖拽排序时，用
grid-area配合 JS 修改序号，比如item.style.gridArea = '1 / 2 / 3 / 4'，比 Flex 的order更直观 - 动画友好：
transition可作用于grid-column/grid-row，实现平滑移动；order不支持过渡 - 性能提示：大量子项开启
clip-path会拖慢渲染，建议控制在 100 个以内；必要时加will-change: transform提升合成层
真正麻烦的是磁贴内容自适应高度——Grid 容器默认按内容撑开行高，若想强制统一行高，得靠 grid-auto-rows: minmax(120px, 1fr) 配合 aspect-ratio，而不是硬写 height。
