Grid 子项上 shape-outside 无效是规范限制，因 Grid 定位使元素脱离文档流，而 shape-outside 仅作用于参与行内流式布局的浮动元素；需将图文共同置于 Grid 单元格内的普通块级容器中实现环绕。
Grid 本身不支持文本环绕图片，shape-outside 在 Grid 子项上完全无效——这不是写法问题，而是规范层面的限制。你不能靠给 .image 加 float: left 和 shape-outside: circle() 就让文字绕起来。
为什么 grid-column + float 组合在 Grid 子项上失效
浏览器明确忽略 Grid 容器中子元素的 float 和 shape-outside。原因很直接：grid-column / grid-row 已将元素定位在网格轨道中，它已脱离文档流；而 shape-outside 只作用于参与行内流式布局的浮动元素（float: left 或 float: right），两者底层机制冲突。
-
float被规范定义为“仅在块级上下文中触发文本环绕”，Grid 容器不提供该上下文 - 即使图片设了
width、height和margin，只要它是display: grid的直系子项，float就被静默丢弃 -
::before插入图片、content: url()、position: absolute等方式，同样无法参与外部段落的文字流计算
真正能跑通的结构：Grid 控制大区，float 控制区内图文
必须把「图文共处一个流式容器」这个前提重建起来。做法是：让 Grid 只负责划分大区域（比如主内容区、侧边栏），而把需要环绕的图片和文字一起塞进某个 Grid 单元格内部的普通 <div> 或 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 里。
- HTML 中图片标签必须出现在文字内容之前，否则环绕从段落开头就开始，视觉错位
- 该内部容器（即 Grid 子项）不能设
overflow: hidden，否则会裁掉文字绕到图片下方的部分 - 图片需设
float: left、width和height（固定值或height: auto）、margin-right: 12px，禁用display: block或margin: auto - 如果 Grid 列宽是
200px，但图片宽180px+ 文字最小宽度200px，那文字根本没空间绕，只能换行到底部——列轨道得留足余量
别碰 CSS Exclusions：wrap-flow 和 wrap-through 还不能用
wrap-flow、wrap-through 这些来自 CSS Exclusions 的属性，本意就是让文本绕开任意定位元素（包括 Grid 子项），但它们仍停留在 Editor’s Draft 阶段。截至 2026 年 5 月：
立即学习“前端免费学习笔记（深入）”；
-
wrap-flow: both在 Chrome/Firefox/Safari 中均无实现 -
shape-outside只在float或position: absolute元素上有效，且后者需配合clip-path才能影响文本流——但绝对定位又脱离了 Grid 轨道控制 - caniuse.com 标为 “No support in any browser”，生产环境请彻底放弃依赖
最容易被忽略的点是：Grid 子项的样式看似自由，实则受容器约束极强。一旦你试图在它内部强行恢复流式行为（比如加 float），就必须确保其父级（即 Grid 子项自身）不带任何破坏流式上下文的样式，比如 overflow: hidden、display: flex、display: grid ——它必须是一个干净的、默认的 display: block 容器。
