不能用 column-count 做卡片多列，因其专为纯文本流设计，会强行切割卡片导致事件失效、布局错乱；应使用 flex 或 grid 实现多列卡片布局。
用 display: flex 或 display: grid 排，别碰 column-count——后者专为纯文本流设计，套在卡片上会把 <div class="card"> 硬切成两半，JS 事件、焦点、动画全失效。<h3>为什么不能用 column-count 做卡片多列</h3>
<p><code>column-count 是浏览器对「一段连续文本」的分栏渲染机制，不是布局工具。它会无视子元素语义，强行按高度切片：
- 卡片内图片被截成上下两块，出现在不同列
-
click事件绑在.card上，但 DOM 节点实际被拆散，监听失效 - 父容器设了
display: flex或display: grid，column-count直接被忽略（CSS 规范明确定义：多列不参与 flex/grid 的格式化上下文） - 响应式时列宽突变，卡片内容挤压、文字换行错乱，且无法用
min-width控制单卡最小宽度
Flexbox 多列卡片的实操要点
适合一维排列（横向为主），控制灵活、兼容性好（IE10+ 需加 -ms- 前缀）：
- 父容器必须设
display: flex+flex-wrap: wrap，否则卡片溢出不换行 - 单张卡片推荐用
flex: 0 0 calc(33.333% - 16px)实现三列（假设gap: 16px），避免因四舍五入导致最后一列掉行 - 别只靠
justify-content: space-between对齐——当卡片数非 3 的倍数时，末尾空隙过大；改用gap: 16px更可控 - 移动端退化为单列，直接写
@media (max-width: 768px) { .card-grid { flex-direction: column; } }，不用重写flex-basis
Grid 多列卡片更省心的写法
二维布局原生支持等高、自适应、间隙统一，现代项目首选：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid+grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，自动算列数，窄屏自然缩为 1 列 -
gap: 16px同时控制行列间距，比margin安全（不参与子项尺寸计算） - 卡片内文字溢出用
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;，别依赖height固定截断 - 若需首行标题横跨全部列（如“推荐商品”大标题），单独抽离为
<h2 class="section-title"></h2>，不放进 grid 容器内——grid-column: 1 / -1可控，column-span: all在 grid 里无效
真正容易被忽略的是卡片内容高度差异带来的视觉断裂：Flexbox 下某张卡片特别高，会导致下一行左对齐错位；Grid 下虽自动等高，但若内部用了 position: absolute 且没配 position: relative，元素会溢出卡片边界。动手前先确认子元素的定位上下文是否完整。
