auto-fit更适合移动端卡片列表，因其合并空轨道使有内容项拉伸占满整行，避免横向滚动或右侧留白；auto-fill则预留所有可能列，易致窄屏溢出。
移动端 Grid 自动填充布局，核心不是加多少 media query，而是用对 auto-fit 和 minmax() 的组合——写错一个参数，小屏就留白、换行或横向滚动。
为什么 auto-fit 比 auto-fill 更适合移动端卡片列表
auto-fit 会把空列合并掉，让有内容的项拉伸占满整行；auto-fill 则坚持预留所有可能列轨道，哪怕只有一张图也撑出三列空白，极易在窄屏触发横向滚动或右侧大片留白。
- 小屏（比如 375px 宽）下，
minmax(250px, 1fr)+auto-fill可能只容得下 1 列，但因预留逻辑仍算“可放 1 列”，实际宽度却超限 → 触发横向滚动 - 同条件下用
auto-fit，它检测到第二列无内容，直接丢弃该轨道，仅剩的一张图独占整行宽度，视觉紧凑且不溢出 - 仪表盘类固定槽位需求（如 3×3 天气图标）才考虑
auto-fill；内容长度不确定的新闻卡片、商品列表一律选auto-fit
minmax() 的下限值怎么设才不糊图、不换行
下限不是越小越好。设成 100px 或 15vw，小屏文字密集卡片会频繁断行，图片被压扁，点击区域过小。
- 图片为主：下限建议
min(160px, 25vw)—— 既防绝对像素过小，又随视口缩放保比例 - 图文混合（含标题+摘要）：至少
280px，否则一行塞不下两行文字 - 纯文字标签类（如筛选 Chip）：可用
max-content或固定80px，避免拉伸失真 - 千万别写
minmax(0, 1fr)或minmax(min-content, 1fr)：前者导致列宽趋近于零，后者让 Grid 放弃响应式计算，退化为单列
gap 会偷偷吃掉可用宽度，必须手动补偿
gap: 1rem 看似只是间距，但它不参与 minmax() 计算——浏览器先按列宽分配空间，再扣掉 gap，结果就是“明明够 3 列，却只排了 2 列”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 假设容器宽 375px，
gap: 1rem（≈16px），2 个 gap 就吃掉 32px，实际可用宽度只剩 343px - 若你设的是
minmax(180px, 1fr)，343px ÷ 2 = 171.5px ＜ 180px → 第三列被挤掉 - 解决办法：把 gap 算进下限，写成
minmax(calc(180px + 1rem), 1fr)，或更稳妥地用minmax(calc(180px + 2 * 1rem), 1fr)（按最大可能 gap 数预估） - 注意：
calc()里不能混用vw和rem，单位要统一
高度不一致时卡片错位，别只靠 align-items
Grid 默认 align-items: stretch，短卡片会被拉高，和长卡片底部不对齐，看起来像“漂浮”。加 align-items: start 能解决，但要注意副作用。
-
align-items: start对整行生效，如果某张卡片内部有margin-bottom: auto之类依赖拉伸的布局，会失效 - 更精准的做法是给卡片自身加
align-self: start，不影响其他项目 - 若卡片内有图片，记得设
img { height: auto; max-width: 100%; }，否则图片超出网格轨道高度，可能被裁剪 - 部分安卓 WebView 对
align-self支持不稳定，可加兜底：display: flex; flex-direction: column;+flex: 1;控制内部内容撑满
真正难调的不是语法，是 gap 和 minmax() 下限之间的隐性博弈——它们共同决定“到底能塞几列”，而这个数字在不同设备上浮动极敏感。动手前，先用 Chrome DevTools 的 device toolbar 拉一遍 320px–428px 区间，看列数跳变点在哪，再反推 minmax 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
