不对称布局需手动指定网格项起止线，用grid-row/grid-column硬编码坐标实现；grid-template-areas因矩形约束无法处理斜跨、跳列等非对称需求。
直接说结论：不对称布局不是靠“拉伸”或“错位”凑出来的，而是靠手动指定每个网格项的起止线，再用留白、跨距和层叠主动制造张力。用 grid-template-areas 画大区块适合海报骨架，但真要非对称——比如斜跨三行、跳过中间列、L形切口——必须放弃区域命名，改用 grid-row 和 grid-column 硬编码坐标。
为什么 grid-template-areas 在非对称场景下会失效
它本质是“矩形语义块”的映射工具，所有同名区域必须构成完整矩形，且每行都得对齐出现。一旦你想让某个元素从第1行延伸到第4行、同时只占第2~3列，grid-template-areas 就无能为力——浏览器要么静默忽略那行定义，要么强制拉伸变形。
- 写
grid-template-areas: "a b ." "a d d"，第二行的a试图向上延伸？规范禁止跨行同名区域，整行定义被丢弃 - 全用点号
.的行，高度塌陷为 0，后续区域整体下移，视觉错乱 - 区域名含数字开头（如
1hero）或短横线（如hero-banner），会静默失败，控制台不报错
用 grid-row / grid-column 手动锚定每个项的位置
这才是真正掌控非对称的路径：浏览器按你写的线号硬放，不校验重叠、越界或留空。关键不是“怎么写”，而是“怎么写才不翻车”。
-
grid-row: 2 / 4表示从第2条横线开始、到第4条横线结束（占第2、第3行），不是“跨2行”这种模糊说法 - 想撑满容器底部？别依赖
grid-row: 1 / -1—— Safari（尤其 iOS 16 前）可能只渲染到显式定义的行数；稳妥做法是提前定义足够行轨道，比如grid-template-rows: repeat(12, minmax(100px, auto)) - 列方向用
grid-column: 1 / span 3比grid-column: 1 / 4更安全，尤其当列数可能动态变化时 - 给轨道起名（如
grid-template-columns: [start] 1fr [mid] 2fr [end] 1fr），再写grid-column: start / end，比纯数字可读性高，也方便后期调整
重叠、旋转与 z-index 必须显式激活 position
想让标题斜插进来、卡片破格层叠？只加 transform: rotate(-8deg) 不够。Grid 项默认是 position: static，此时 z-index 无效，旋转后还可能被相邻项裁切。
- 目标元素必须加
position: relative（或absolute），才能使z-index生效 -
transform-origin: bottom left控制旋转支点——海报里斜角标题通常从左下角甩出，不是绕中心转 - 旋转后位置偏移常见，配合
translateX(-10px)或translateY(4px)微调，避免穿帮 - 多个重叠项在小屏下极易堆叠错乱，响应式 fallback 不能只靠媒体查询改坐标，得考虑分层（比如把装饰元素抽成伪元素或绝对定位层）
非对称的本质是克制的失控：每一组 grid-row 和 grid-column 数值，都是你亲手松开了一点自动布局的缰绳。松多少，得看容器尺寸、内容长度、以及你愿不愿意为某台旧 iPad 多写一行 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
