真正可控的宽度策略是「约束 + 弹性」：用 width 定基准，max-width: 100% 防溢出，再靠 Grid/Flex 分配空间；移动端推荐 width: 100%; max-width: 320px;，图片需设 width: 100%; height: auto; display: block;，Grid 用 repeat(auto-fit, minmax(280px, 1fr)) 实现响应式列数，Flex 卡片应写 flex: 0 0 calc(50% - 1rem) 并加 flex-wrap: wrap，内部图片和文字须加 overflow: hidden 与截断规则确保不撑破布局。
卡片本身宽度设成固定值就错了一半
直接写 width: 300px 看似简单，但小屏下会横向溢出、图片拉伸、文字撑破边框——这不是“排版”，是强行塞进固定框。真正可控的宽度策略是「约束 + 弹性」：用 width 定基准，用 max-width: 100% 防溢出，再靠容器层的 Grid/Flex 规则分配空间。
常见错误现象：width: 300px 在 iPhone SE（375px 宽）上留不下左右 padding，导致水平滚动；设成 width: 100% 又让大屏单列铺满，失去卡片感。
-
width: 300px仅适用于明确知道最大容器宽度且不做响应式的场景（如后台管理侧边栏） - 移动端起步推荐：
width: 100%; max-width: 320px;，既适配小屏，又限制单卡上限 - 若卡片含图片，
img必须加width: 100%; height: auto; display: block;，否则底部多出 4px 空隙，破坏高度一致性
Grid 列宽用 minmax(280px, 1fr) 是怎么算的
minmax(280px, 1fr) 不是“最小 280px、最大无限”，而是告诉浏览器：“这张卡不能窄于 280px，宽可以吃掉所有剩余空间，但只在有足够空间时才均分”。它和容器总宽、gap、子项数量动态博弈。
典型误用：把 grid-template-columns: repeat(3, 1fr) 当响应式用——这锁死三列，小屏照样硬挤，必然换行失败或溢出。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) -
280px是临界值：iPhone SE 减去左右 20px 边距后剩约 335px，刚好容下一张卡+gap；设成 320px 就可能触发安卓小屏横向滚动条 -
1fr不是像素，是“剩余空间除以当前有效列数”，所以大屏下卡片会越拉越宽——必须配合.card { max-width: 400px; }截断 -
auto-fit会收缩空轨道，auto-fill保留空白列，动态内容选auto-fit更稳
Flex 布局下卡片宽度怎么防塌陷
Flex 卡片容易在小屏下“塌”成一列但宽度失控，或中屏双列时左右不对齐——问题常出在没切断 flex 项目的弹性伸缩行为。
错误示范：flex: 1 让卡片抢空间；width: 50% 不考虑 gap 导致实际列宽超限；flex-basis 漏写单位（如写 flex-basis: 300 而非 300px）直接失效。
- 双列安全写法：
flex: 0 0 calc(50% - 1rem)（假设gap: 1rem） - 三列：
flex: 0 0 calc(33.333% - 1.333rem)（gap 为 1rem 时，两列间共 2 个 gap，均摊到每项是 2/3 ≈ 0.666rem，但更稳妥是用gap属性而非手动减） - 必须加
flex-wrap: wrap，否则卡片全挤一行，溢出也不换行 - 别依赖
justify-content: space-between对齐最后一行，它会在最后一行只有 1–2 张卡时拉开间距，视觉失衡；改用justify-content: flex-start+ 左对齐更可控
图片和文字超长时的截断边界在哪
卡片尺寸控制不只看外框，更要看内部元素是否“守规矩”。一张没约束的图片或一段没截断的标题，会直接撑爆 max-width 和 minmax 的努力。
常见崩溃点：只给卡片设 border-radius: 8px，但图片没 overflow: hidden，圆角失效；标题用 line-clamp: 2，结果 Safari 旧版不支持，文字直接溢出。
-
img外层卡片必须加overflow: hidden，否则border-radius对图片无效 - 单行标题截断用：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，兼容性比line-clamp高得多 - 描述段落若需多行截断，优先用
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;，并补overflow: hidden - 所有
img标签必须带alt属性，且不能为空；加载失败时，alt是唯一可读信息，也是无障碍基础
最易被忽略的是：卡片内元素的 margin 和 padding 会叠加进整体尺寸计算，而 gap 是网格/弹性容器的属性，不计入子项盒模型——混用两者时，实际可用宽度 = 容器宽 − gap 总和 − 边框，不是简单减去一个像素值。
