核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，每列最小280px、最大均分剩余空间，auto-fit收缩空轨道实现真正自动换行，禁用width和margin，统一用gap控制间距。
卡片自动换行不靠手动加 <br>，核心是用 CSS Grid 的 auto-fit + minmax() 组合；间距统一走 gap，别混用 margin。
grid-template-columns 怎么写才能自动换行
写死列数（比如 grid-template-columns: repeat(3, 1fr)）就不是自动换行。真正起作用的是：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))—— 每列最小 280px，最大均分剩余空间，auto-fit会收缩空轨道，让最后一行不空着 - 别用
auto-fill：它会提前占满所有可能列位，哪怕没内容，导致末尾大片空白 -
minmax(280px, auto)是错的：auto在这里不被识别，必须写成1fr或具体长度（如300px） - 最小宽度别设太低（比如
120px），否则小屏强行塞 4 列，文字挤成一条线
gap 和 margin 混用会导致间距翻倍
gap 是 Grid 原生间距控制机制，它只作用于网格轨道之间，不会影响容器边缘。一旦卡片子元素自己设了 margin，就会和 gap 叠加，出现比预期宽一倍的空隙。
- 统一删掉卡片上的
margin，只靠gap: 1rem控制行列间距 - 如果卡片内部需要内边距，用
padding，不是margin -
gap在 Flex 布局里也有效（flex-wrap: wrap时），但 Grid 下更稳定
为什么卡片高度不一致时看起来歪斜
Grid 默认按行分配高度，一行中最高卡片决定整行高度。但若某张卡片文字暴增、图片加载慢或有动态内容，会导致视觉参差。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 想底部对齐：给网格容器加
align-content: start，再配grid-auto-rows: minmax(min-content, max-content) - 不想截断内容又想整齐：卡片内部用
display: flex; flex-direction: column，标题/内容/按钮分别设flex: 1和margin-top: auto实现底部贴底 - 固定高度（如
height: 300px）+overflow: hidden最快但风险高——长文本直接被砍掉
IE11 或旧 Safari 下换行失效怎么办
auto-fit 和 minmax() 在 IE11 完全不支持，部分旧版 Safari 对 auto-fill 解析异常。
- 用
@supports隔离现代写法：@supports (display: grid) and (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) - 降级方案可回退到单列流：
display: block+width: 100%，或 Flex 布局（flex-wrap: wrap+flex: 0 0 calc(50% - gap/2)） - 真要兼容 IE，别碰
auto-fit，直接上媒体查询写死断点，比如@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }
最容易被忽略的是：换行行为完全由容器决定，卡片自身不能设 width 或 float，否则 Grid 的弹性计算就失效了。哪怕只加了一行 width: 300px，整个自适应逻辑就崩了。
