grid子项上shape-outside完全无效，因grid规范禁用float导致其失去作用对象；必须将图文共置于grid单元格内的普通块级容器中，由float控制内部环绕，grid仅负责区域划分。
shape-outside 在 Grid 子项上完全无效，这不是写法问题，而是规范限制——Grid 子项天生脱离文档流，而文字环绕必须依赖浮动元素参与的行内流式上下文。
为什么 grid-column 里加 float 和 shape-outside 没反应
浏览器会静默忽略 Grid 容器直系子元素上的 float 属性，这是 CSS 规范明确规定的：Grid 布局下，浮动被禁用。哪怕你写了 float: left 和 shape-outside: circle(50%)，只要该元素是 display: grid 容器的直接子项，文字就纹丝不动。
常见误操作包括：
- 给
.image加float后塞进 Grid 区域 —— 失效 - 用
::before插入图片或content: url()—— 不参与外部段落的文字流 - 在
grid-area里写wrap-flow: both—— 所有主流浏览器（Chrome/Firefox/Safari）均未实现，caniuse 标为 “No support”
真正能跑通的结构：Grid 控制区块，float 控制内部图文
把「图文共处一个流式容器」这个前提重建起来：Grid 只负责划分大区域（比如主内容区、侧栏），而把需要环绕的图片和文字一起放进某个 Grid 单元格内部的普通 <div> 或 <code><p></p> 里。
关键实操点：
- 图片 HTML 必须写在文字内容之前，否则环绕起点错位
- 图片设
float: left、width（固定值或max-width: 100%）、height: auto，禁用display: block和margin: auto - 包裹它的父容器（即 Grid 子项）不能设
overflow: hidden，否则会裁掉绕到图片下方的文字 - Grid 列轨道宽度要留足余量：若图片宽 180px，文字最小换行宽度约 200px，列宽至少设为
minmax(400px, 1fr)
shape-outside 兼容性避坑指南
Safari 对 shape-outside 支持极弱：至今不支持 url() 语法（如 shape-outside: url(image.svg)），只认 circle()、polygon()、inset() 这类内置函数。
如果必须用 SVG 路径：
- 确保 SVG 文件只含一个闭合的
<path></path>（d 属性以Z结尾） - 删掉所有
<g></g>、<defs></defs>、transform属性，导出时取消“响应式”选项 - 先用
shape-outside: circle(50px)验证环绕逻辑是否通，再换 SVG
Grid 列宽与环绕空间的隐性冲突
很多人调了半天发现文字就是不绕，最后发现是 Grid 列宽太窄：文字没空间绕，只能换行到底部。这不是样式没生效，而是物理空间不足。
判断依据很简单：
- 计算图片宽度 + 文字最小可换行宽度（通常 ≈ 字体大小 × 20–25 字符）
- Grid 列轨道（
grid-template-columns中对应列）必须大于该总和 - 推荐用
minmax(360px, 1fr)替代固定像素，兼顾弹性与底线空间
最容易被忽略的是职责分层：display: grid 只管“哪块内容放哪”，float 和 shape-outside 只管“这块里面图和字怎么缠”。混着调，失败是常态；分开用，才是稳定路径。
