HTML卡片排版怎么换行？网格间距调整方法-html教程-PHP中文网

核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，每列最小280px、最大均分剩余空间，auto-fit收缩空轨道实现真正自动换行，禁用width和margin，统一用gap控制间距。

html卡片排版怎么换行？网格间距调整方法

卡片自动换行不靠手动加，核心是用 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); }