实用教程
用 Claude Opus 5.5 修复商品网格的横向溢出
让 Claude Opus 5.5 先找出哪个网格轨道或子元素超出了可用宽度，再改断点。即使列宽写着 `1fr`，长商品编码也可能把自动最小宽度撑到屏幕之外。提供实际 HTML、计算后的样式和容器尺寸；单靠截图无法定位这个最小宽度。
让 Claude Opus 5.5 先找出哪个网格轨道或子元素超出了可用宽度，再改断点。即使列宽写着 1fr，长商品编码也可能把自动最小宽度撑到屏幕之外。提供实际 HTML、计算后的样式和容器尺寸；单靠截图无法定位这个最小宽度。
先区分三种宽度问题
| 现象 | 优先检查 | 有限修改 |
|---|---|---|
| 弹性列被长字符串撑开 | 轨道与子元素的最小宽度 | 考虑 minmax(0, 1fr) 和 min-width: 0 |
| 卡片宽度正常，图片超出 | 图片固有宽度及约束 | 限制图片尺寸，保留宽高比 |
| 两列容不下需要展示的内容 | 侧栏、间距和可用宽度 | 根据内容需求切换为单列 |
MDN 的 minmax 说明区分了自动最小值与零最小值。轨道能缩小，并不意味着内容会自动换行或缩放。需要分别处理轨道和具体溢出的子元素，不要把整页的溢出全部隐藏。
先算空间，再提 CSS 修改
假设商品网格内部宽 960 px，侧栏 240 px，间距 24 px，弹性区域还剩 696 px。视口缩到 390 px、两侧各留 16 px 后，内部只剩 358 px。继续保留同样侧栏与间距，商品区只有 94 px。即使浏览器能把轨道压到这么窄，也应该调整布局。
这些算术已在本地计算；没有实测 Opus 修复结果或生产商品网格。桌面候选规则是 grid-template-columns: 240px minmax(0, 1fr)，商品区域设置 min-width: 0。长段文字可以换行，机器可读的编码要保持可复制。对比表格可能更适合在自己的容器内横向滚动，而不是拆散每个词。不要给整页直接加 overflow-x: hidden：它会遮住问题，也可能裁掉有用内容。
可直接使用的诊断提示词
根据附带的 HTML、CSS、计算后样式和截图检查商品网格。桌面内部宽 960 px，侧栏 240 px，间距 24 px。手机视口 390 px，两侧内边距各 16 px。找出第一个 scrollWidth 超过 clientWidth 的元素，追踪其网格轨道和最小宽度规则。区分轨道尺寸、不可断开的内容及图片固有尺寸。提出最小修改，再给出有理由的单列断点。保留商品顺序、可见名称、编码复制、焦点轮廓和图片比例。输出相关选择器、修改前后的宽度计算、最小补丁，以及 390 和 1280 px 的测试方法。无法从材料确认的内容要标明；没有运行浏览器测试就不要声称测过。模型参考是官方 Opus 提示词指南。这里提供的是编辑工作流示例，并非模型实测结果。2018 年的社区问题说明最小尺寸一直容易引起误解，不能用来证明当前搜索量。
怎样验收布局
依次放入无空格的长 SKU、翻译后的名称、缺失图片，并检查键盘焦点。比较文档滚动宽度与视口宽度，再单独检查允许局部滚动的区域。放大文字、移除侧栏后也要复查。某一个宽度的截图通过，不代表整个断点区间都正常。
如果问题是图片资源选择，参考响应式图片检查。布局能容纳目标商品形状后，可以在 Panelly Studio 创作配套广告图；这不表示 Panelly 集成了 Opus。
上线前的三个问题
所有网格都应该把最小值设成零吗？
不是。只有轨道需要收缩时才考虑这样做，同时规定内部内容如何处理。刻意保持固定宽度的对比区域有不同需求。
可以直接截断商品名称吗？
前提是界面仍能在需要时提供全名。先修复宽度约束，再决定截断策略。
需要重新生成图片吗？
CSS 尺寸问题通常不需要。先检查实际提供的图片和容器，只有构图确实不适合时才换素材。
