Grid 本身无法实现文字环绕图片，shape-outside 在 Grid 子项上完全无效——因 Grid 定位使元素脱离文档流，而 shape-outside 仅作用于参与行内流式布局的浮动元素；必须将图文共置于 Grid 单元格内的普通块级容器中，由 float 控制内部环绕。
Grid 本身无法实现文字环绕图片，shape-outside 在 Grid 子项上完全无效——这不是写法问题，而是 CSS 规范层面的硬性限制。
为什么给 Grid 子项加 float 和 shape-outside 没反应
浏览器明确忽略 Grid 容器中子元素的 float 和 shape-outside。原因很直接：Grid 子项由 grid-column/grid-row 控制位置，已脱离文档流；而 shape-outside 只作用于参与行内流式布局的浮动元素（float: left 或 float: right），两者底层机制冲突。
-
overflow: hidden、display: block、margin: auto这类样式会进一步破坏环绕所需的流式上下文 - 用
::before伪元素插入图片或通过content: url()生成，同样不参与外部段落的文字流计算 - 即使图片设了
float: left和shape-outside: circle(50%)，只要它是display: grid容器的直系子项，就必然失效
真正能跑通的结构：Grid 控制区块，float 控制内部图文
必须把「图文共处一个流式容器」这个前提重建起来。做法是：让 Grid 只负责划分大区域（比如主内容区、侧边栏），而把需要环绕的图片和文字一起塞进某个 Grid 单元格内部的普通 <div> 或 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 里。
- 该内部容器（即 Grid 子项）不能设
overflow: hidden，否则会裁掉文字绕到图片下方的部分 - 图片需设
float: left（或right）、固定宽高（或width/height配合aspect-ratio）、margin-right（或margin-left），禁用display: block - HTML 中，图片标签必须写在文字内容之前，否则环绕起点错位
- 如果 Grid 列宽是
200px，但图片宽180px+ 文字最小宽度200px，那文字根本没空间绕，只能换行到底部——列轨道得留足余量
shape-outside: url() 在 Safari 里挂了怎么办
Safari 至今不支持 shape-outside: url(#svg-path) 或 shape-outside: url(image.svg)，哪怕 SVG 路径闭合、背景透明、尺寸明确。这是硬性兼容缺口，不是配置问题。
- 想跨浏览器稳定生效，优先用
shape-outside: circle(50%)或polygon()这类 CSS 内置函数 - 若必须用 SVG 路径，Chrome/Firefox 可行，但得确保
<svg></svg>内只含单个<path></path>，无<g></g>、<defs></defs>或多余属性 - 别依赖
wrap-flow或wrap-through——Exclusions 草案仍无任何浏览器实现，caniuse标为 “No support”
最易被忽略的一点：Grid 和 float 是两层职责。Grid 管“哪块内容放哪”，float 管“这块里图和字怎么缠”。混在一起调，99% 的失败都卡在这儿。
