css grid 本身不支持文字环绕图片，wrap-flow等exclusions属性未被任何主流浏览器支持；必须将图文共置普通块级容器内用float+shape-outside实现环绕，再将其作为grid单元格。
CSS Grid 中无法实现真正的文字环绕布局，CSS Exclusions（wrap-flow、wrap-through）至今没有被任何主流浏览器支持。
为什么 wrap-flow 在 Grid 里完全不生效
Exclusions 草案要求元素必须参与文本流才能影响周围文字走向，但 Grid 子项由 grid-column/grid-row 控制位置，天生脱离文档流；wrap-flow: both 在 Chrome、Firefox、Safari 中均无实现，caniuse 明确标注为 “No support in any browser”；即使强行写上该属性，浏览器会静默忽略，控制台也不会报错，容易误判为“写法不对”。
别把 shape-outside 往 Grid 子项上硬套
很多人试 shape-outside: circle(50%) + float: left 给 Grid 直系子项，结果文字纹丝不动——因为规范规定：Grid 容器中子元素的 float 属性被强制忽略；shape-outside 只对真正浮动（且处于行内流上下文）的元素有效；伪元素（如 ::before）或 content: url() 插入的内容也不参与外部段落的文字流计算。
真正能落地的图文环绕结构只有这一种
把图文共置一个普通块级容器（比如 <div class="text-wrap">），内部用 <code>float + shape-outside 实现环绕；再把这个容器作为 Grid 的一个单元格（即 Grid 子项）；图片标签必须出现在文字内容之前，否则环绕起点错位；该容器不能设 overflow: hidden，否则裁掉绕到图片下方的文字；若用 shape-outside: url(#my-path)，Safari 会直接失效，优先选 circle() 或 polygon()；Grid 列宽要留足余量——比如图片宽 180px，文字最小换行宽度约 200px，那列轨道至少得 400px 才有空间绕。
最容易被忽略的是职责分层：display: grid 只管“哪块内容放哪”，float 和 shape-outside 只管“这块里面图和字怎么缠”。混着调，失败是常态；分开用，才是稳定路径。
