先给出容器和卡片的约束
“用 ChatGPT 把三张卡片改成响应式”过于抽象。告诉它卡片最窄可读宽度、间距、长标题如何换行、手机是否允许横向滚动。下面的三卡片纯属自拟；重点是检查规则，不是让模型替你判断所有设计尺寸。
从自动列数开始
可给容器设置 display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))。MDN 的 Grid 文档使用同类写法：容器容得下几条最小宽度轨道就排几列，剩余空间分给各列。三张卡片在宽容器可并排，窄一些会减少列数，不必逐个写固定断点。
但 230px 并非对所有手机都安全。若容器自身可用宽度不足230px，比如嵌在带大内边距的侧栏中，最小宽度会撑出横向滚动。可以按实际布局改成 minmax(min(100%,230px),1fr)，并给卡片内部的长 URL 或代码行设置换行规则。这个修正不等于“任何内容都不会溢出”；图片、不可断行文本和内嵌组件还要单独检查。
预览不能只看桌面截图
测试至少一个窄手机宽度与一个桌面宽度，并在卡片里放很长的标题及 URL。观察列数、文字截断、点击区域和页面整体有没有横向滚动。若内容必须保持表格列对齐，卡片网格可能不是合适语义结构，不应为了视觉把数据表格改成无关联的盒子。
向模型反馈具体失败
提示它“在可用宽度210px的容器出现横向溢出”，比“手机不好看”更有用。要求模型只改产生溢出的最小宽度/子元素换行，并说明变更前后预期。本站依据官方示例核对语法与浏览器排版原理；最终宽度、字体和内容以你的真实页面预览为准。