css grid本身无法实现文字环绕图片，因grid子项脱离文档流，而shape-outside仅作用于参与行内流的浮动元素；必须将图文共置于grid单元格内的普通块级容器中，由float+shape-outside控制内部环绕，grid仅负责区域划分。
CSS Grid 本身无法实现文字环绕图片，这不是写法问题，而是规范限制——Grid 子项脱离文档流，而文字环绕必须依赖浮动元素参与的行内流式上下文。
为什么 shape-outside 在 Grid 子项上完全无效
浏览器会静默忽略 Grid 容器直系子元素上的 float 和 shape-outside。原因很直接：Grid 用 grid-column/grid-row 控制位置，子项已不参与文本流；而 shape-outside 只对真正浮动（且处于行内流上下文）的元素生效。
-
::before伪元素或content: url()插入的图片也不参与外部段落的文字流计算 - 即使写了
float: left和shape-outside: circle(50%)，只要该元素是display: grid的直系子项，就必然失效 -
wrap-flow: both或wrap-through属于 CSS Exclusions 草案，Chrome/Firefox/Safari 均未实现，caniuse标为 “No support”
真正能跑通的结构：Grid 控制区块，float + shape-outside 控制内部图文
必须把「图文共处一个流式容器」这个前提重建起来。做法是：让 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> 里。
- 图片 HTML 必须写在文字内容之前，否则环绕起点错位
- 图片需设
float: left（或right）、固定宽高（或width/height配合aspect-ratio）、margin-right（或margin-left） - 禁用
display: block和margin: auto，它们会破坏流式上下文 - 包裹它的父容器（即 Grid 子项）不能设
overflow: hidden，否则会裁掉绕到图片下方的文字
shape-outside: url() 的 Safari 兼容性避坑
Safari 至今不支持 shape-outside: url(image.svg) 或 shape-outside: url(#my-path)，哪怕 SVG 路径闭合、背景透明、尺寸明确——这是硬性兼容缺口，不是配置问题。
- 想跨浏览器稳定生效，优先用
shape-outside: circle(50%)或polygon()这类内置函数 - 若必须用 SVG 路径，Chrome/Firefox 可行，但得确保
<svg></svg>内只含单个闭合的<path></path>（d属性以Z结尾），删掉所有<g></g>、<defs></defs>、transform属性 - 先用
shape-outside: circle(50px)验证环绕逻辑是否通，再换 SVG
Grid 列宽与环绕空间的隐性冲突
很多人调了半天发现文字就是不绕，最后发现是 Grid 列宽太窄：文字没空间绕，只能换行到底部。这不是样式没生效，而是物理空间不足。
- 判断依据很简单：计算图片宽度 + 文字最小可换行宽度（通常约 200px）
- 若图片宽 180px，列轨道至少设为
minmax(400px, 1fr)才有余量 - 别指望靠
grid-template-columns: 1fr 1fr自动适配——文字环绕需要的是“列内留白”，不是“列间分配”
最容易被忽略的是职责分层：display: grid 只管“哪块内容放哪”，float 和 shape-outside 只管“这块里面图和字怎么缠”。混着调，失败是常态；分开用，才是稳定路径。
