minmax()定义网格轨道的弹性范围，需同时满足最小和最大限制；常用写法为repeat(auto-fit, minmax(250px, 1fr))，配合gap和box-sizing等细节实现响应式布局。
minmax() 在 Grid 中不是“选一个值”，而是定义轨道的**弹性范围**：必须同时满足最小和最大限制，浏览器在两者之间动态分配宽度。
核心用法：minmax(最小值, 最大值)
最常用组合是 minmax(250px, 1fr)，含义是：
- 该列宽度不能小于 250px（保内容可读、防挤压）
- 也不能超过它按 1fr 应得的那份剩余空间（保证等宽、不溢出）
- 容器变宽时，列自动拉伸；变窄时，列数减少，剩余列仍撑满整行
搭配 repeat(auto-fit) 才真正生效
单独写 minmax 没意义，必须嵌套在 repeat() 中：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
推荐写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - auto-fit 会合并空列，让有内容的列均分可用空间
- 别用 auto-fill——它保留所有可能列槽，容易导致列被虚占、变窄或右侧留白
常见错误与避坑点
这些写法看似合理，但实际会失效或行为异常：
- minmax(100px, 2fr)：2fr 在多列中引发比例冲突，统一用 1fr
-
minmax(1rem, 1fr)：rem/em 随字体缩放，干扰列数计算，改用 px 或
clamp() -
子项设 width: 100% 或 flex: 1：会覆盖 minmax 的弹性逻辑，卡片内部要加
max-width: 100%和box-sizing: border-box -
忽略 gap：gap 参与可用宽度计算，小屏下大 gap 会让列数骤减，建议用
gap: clamp(0.5rem, 2vw, 1.5rem)或稳妥的1rem
进阶控制：根据内容微调列宽
如果某列需要“刚好包住内容”，而不是等宽伸缩：
- 用
minmax(0, fit-content(200px))替代普通 minmax - 注意：fit-content() 必须套在 minmax() 里，单独写会被浏览器忽略
- 适合操作按钮、头像、状态标签等紧凑型内容列
- 混合使用也行，例如：
minmax(0, fit-content(120px)) 1fr 1fr
