用 repeat(auto-fill, minmax(280px, 1fr))) 实现响应式九宫格，靠浏览器自动计算列数，兼顾内容内敛与视觉一致性，无需 JS 或媒体查询。
直接用 display: grid 实现响应式九宫格，核心不是“固定 3×3”，而是让列数随屏幕宽度自动增减，同时保持格子视觉一致性和内容内敛——这靠 repeat(auto-fill, minmax()) + gap + 子元素约束就能搞定，不需要 JS 或媒体查询。
为什么不用 repeat(3, 1fr) 写死三列
硬写 repeat(3, 1fr) 看似最像“九宫格”，但实际会出问题：
- 小屏下三个等宽列强行撑开，文字或图片可能横向溢出，触发滚动条
- 中大屏留白过多，空间利用率低，失去“填满容器”的响应意图
- 子项内容不均一时（比如有的带长标题、有的只有图标），
1fr无法保证视觉等高，容易错位 - 缩放页面或系统字体放大后，列宽微差累积，网格线对不齐
真正要的不是“必须三列”，而是“在当前宽度下，尽可能多放几个宽度合理、内容不挤的格子”。所以得交给浏览器算。
repeat(auto-fill, minmax(280px, 1fr)) 怎么选参数
minmax(280px, 1fr) 中的两个值决定行为边界：
立即学习“前端免费学习笔记（深入）”；
-
280px是单格最小可用宽度——它应略大于你卡片内最窄内容所需空间（如头像+一行文字+边距） -
1fr是最大可伸展比例，表示剩余空间均分；它不等于“填满整行”，而是“在满足最小宽前提下尽量撑” - 用
auto-fill而非auto-fit：前者保留空轨道（有留白），后者压缩空列（少于9项时会拉宽），九宫格需要的是“格子感”，不是“铺满感”
示例写法：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))); gap: 12px;
别写成 minmax(200px, 300px) 这种固定上限——它会卡死列宽，失去弹性。
子元素必须做内敛控制，否则响应式失效
Grid 只管轨道划分，不管内容是否溢出。常见翻车点：
- 图片没设
max-width: 100%，撑破格子 - 文本无换行控制，
white-space: nowrap或长单词（如 URL）顶开容器 - 字体尺寸未适配，小屏下
16px文字在280px宽度里两行就溢出 - 父容器被更高层
overflow: hidden或width限制，导致 Grid 自身宽度异常
稳妥兜底写法（加在子项上）：
.grid-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.grid-item img {
max-width: 100%;
height: auto;
}
.grid-item p {
font-size: clamp(0.875rem, 4vw, 1rem);
}
移动端横向滚动的根因和排查顺序
如果加了 Grid 还是横向滚动，按这个顺序查：
- 运行
getComputedStyle(document.querySelector('.grid-container')).width，确认容器真占满父级 - 检查是否有未重置的
margin或padding来自 ul/ol 默认样式 - 看子项是否用了
display: inline-block或float，干扰 Grid 流 - 用浏览器 DevTools 的 Layout 面板，勾选 “Show grid areas”，确认轨道没被意外拉宽
- 最后再考虑加
overflow-x: hidden——这只是遮掩，不是解决
最难的从来不是写出那几行 CSS，而是想清楚：那个 280px 是由什么内容决定的？是图标尺寸？文字行宽？还是触摸目标最小点击区？这个判断错了，后面全白搭。
