CSS Grid中文字环绕无效，因Grid子项脱离文档流；需将图形移至Grid外用float+shape-outside实现，再通过负margin视觉归位，且SVG路径须闭合、无冗余元素，Safari尚不支持shape-outside:url()。
文字环绕在CSS Grid里根本不起作用
CSS Grid本身不支持shape-outside，哪怕你给网格项加了浮动或shape-outside，文字也不会绕着它走——因为Grid容器会把子项当作独立的轨道单元来布局，完全忽略传统浮动流的规则。
真正能触发文字环绕的，只有参与文本流的元素（比如float布局中的img或div），而Grid子项默认脱离普通文档流（即使没设position: absolute）。
所以别试grid-area里塞shape-outside，它不会生效。
想让文字绕着Grid里的图形走，得“骗过”浏览器的流式上下文
核心思路：把需要被环绕的图形抽出来，放在Grid容器外部，用float + shape-outside驱动环绕；再用margin或transform把它视觉上“塞回”Grid布局中。
立即学习“前端免费学习笔记（深入）”；
常见做法：
- Grid容器保持结构清晰，只放纯文本内容（比如
<p>、<article>） - 把图形（如SVG或PNG）作为兄弟元素放在Grid容器外层，设
float: left和shape-outside: url(...)或shape-outside: polygon(...) - 用负
margin（如margin-left: -120px）把图形拉进Grid区域，对齐视觉位置 - 确保图形的
width/height固定，否则shape-outside可能计算错边界
示例关键片段：
<div class="grid-wrapper">
<img src="figure.svg" class="float-shape">
<div class="grid-content">
<p>这里是一大段文字……</p>
</div>
</div>
.float-shape需设float: left、shape-outside: url(figure.svg)、width和height，且figure.svg必须有透明背景和明确路径。
SVG作为shape-outside源时，90%失败是因为路径问题
不是所有SVG都能当shape-outside用。浏览器只读取第一个<path>，且该路径必须是闭合的（d属性以Z结尾），坐标系要基于SVG的viewBox原点。
容易踩的坑：
- 导出SVG时勾选了“响应式”，导致
width/height为auto→ 浏览器无法解析尺寸 →shape-outside静默失效 - 路径用了
fill-rule: evenodd但未闭合 → 实际形状为空白 - SVG里带
<g>包裹或多余<defs>→ 必须手动删到只剩一个<path> - 用Figma/Adobe XD直接导出 → 常含
transform属性 → 需手动提取绝对坐标或用工具转成静态d
调试建议：先用shape-outside: circle(50px)确认环绕逻辑通了，再换SVG。
Grid + Shapes在Safari里大概率不工作
截至 Safari 17.4，shape-outside仍不支持url()语法（仅支持circle/polygon/inset），而且对float元素的环绕计算常错位。
如果你的目标用户包含大量Mac/iOS用户，要么：
- 改用
shape-outside: polygon(...)硬编码轮廓（适合简单图形） - 降级方案：用
@supports (shape-outside: circle())做特性检测，fallback为左右两栏Grid（图文分离） - 彻底放弃环绕，改用
clip-path裁剪图片+Grid间隙留白模拟“绕行感”
别指望display: flow-root或contain: layout能修好Safari的Shapes bug——它就是没实现。
最麻烦的其实是响应式：图形尺寸一变，polygon坐标就得重算，而SVG的viewBox缩放又和shape-outside解析不完全同步。这点连Chrome都偶尔抽风。
