clip-path 作用于 grid 容器时仅裁剪可视区域，不改变子项布局、轨道计算或事件响应区；子项仍按原始网格线排列，超出部分仅不可见但交互正常。
clip-path 加在 grid 容器上，子项不会自动贴合边缘
直接结论：clip-path 作用于 display: grid 的父容器时，只裁剪容器的**可视区域**，不改变子项的布局位置、网格轨道计算或事件响应区。子项仍按原始矩形网格线排列，超出 clip-path 范围的部分只是“看不见”，但 hover 仍能触发，点击区域也照常存在。
常见错误现象：
给容器加了 clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)，以为子项会自动收缩到这个五边形内——结果所有子项还是铺满整个原始矩形，只是边缘被“切掉”了一块视觉上。
实操建议：
• 若目标是让整个网格“看起来像星形/波浪边框”，只对容器加 clip-path 即可，简单高效
• 若需要每个子项本身是六边形、三角形等，并彼此无缝拼接（如蜂窝地图），clip-path 必须单独加在每个子项上
• 注意坐标系：默认以 border box 为原点，若容器有 padding 或 border，polygon() 坐标需手动偏移，否则可能把内容裁掉一半
用 grid-template-areas 拼不规则形状？它只支持矩形合并
grid-template-areas 无法表达 L 形、T 形、凹形等非矩形区域。它只接受每行区域名数量一致的字符串，且同名区域必须构成一个**连续闭合矩形**——这是硬性限制，不是浏览器 bug。
常见错误现象：
写了 "a a b" "a c b" 想让 a 占左上两格 + 左下第一格（L 形），结果 a 只渲染在第一行，第二行被忽略或解析失败；控制台无报错，但布局完全不对。
实操建议：
• 画草图时先圈出所有要合并的区域，确认它们是否能组成完整矩形（行列索引连续）
• 真需要非矩形拼接（比如斜切 banner 下接倒三角过渡区），放弃 grid-template-areas，改用 grid-column/grid-row 手动定位 + clip-path 单独塑形
• 用 . 占位空单元格，但必须保证每行“项数”一致，否则整条声明失效
实现六边形网格：Grid 只搭骨架，clip-path 和 transform 才是关键
CSS Grid 本身不能生成六边形网格。它只提供行列结构基础，真正的“蜂窝感”靠每个子项的 clip-path + 行间 transform: translateX(50%) 错位实现。
实操建议：
• 列宽设为固定值（如 200px），行高设为 1.1547 * 200px（即 √3 × 宽度，保证正六边形比例）
• 对偶数行子项加 transform: translateX(50%)，制造交错效果
• 每个子项设 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
• 必须设 grid-auto-flow: dense 防止因错位产生空隙；子项显式写 grid-column: span 1，避免隐式流错乱
• 性能提示：超过 100 个带 clip-path 的子项会明显卡顿，建议加 will-change: transform 提升合成层，或服务端分页
图片拼贴中宽高比失控？别碰 width/height，用 aspect-ratio + object-fit
在不规则拼贴里，图片拉伸、留白、错位，90% 是因为对 <img> 直接设了 width: 100%; height: 100%，覆盖了容器的 aspect-ratio，又没配 object-fit。
实操建议：
• 给图片容器（如 <figure></figure>）设 aspect-ratio: 4/3 或 1/1，让网格格子自身保持比例
• 图片本体用 object-fit: cover（推荐）或 object-fit: contain，前者裁剪居中，后者等比缩放留白
• 绝对不要对 <img> 同时设 width 和 height，这会破坏响应性并干扰 Grid 自动计算
• 关键内容被 cover 裁掉？用 object-position: 20% 30% 微调焦点，而非改 layout
容易被忽略的地方：clip-path 的裁剪发生在绘制阶段，而 object-fit 的缩放发生在内容渲染阶段——二者顺序不可逆。必须先由 object-fit 控制图片如何填满容器，再由 clip-path 裁掉容器外轮廓。顺序反了，就等于在错误的尺寸上做裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
