column-count 仅实现文本流垂直分栏，无法等高；因列非独立容器，不支持对齐、高度控制及响应式列数切换，应改用 flex 或 grid 实现等高列。
column-count 不负责等高，只负责垂直分栏；想让多列视觉上“一样高”，得用 display: flex 或 display: grid。
为什么 column-count 不能实现等高列
它本质是文本流分栏机制，不是布局容器——浏览器把整个内容块切片后按列堆叠，各列 DOM 位置不独立，无法控制单列高度或对齐方式。
- 子元素（如
<div>）会被浏览器强行拆开，可能跨列断裂，导致 JS 事件绑定失效、焦点丢失、动画错乱 - 无法设置列宽比例、无法响应式切换列数（
column-count在媒体查询中切换时会重排全部内容，视觉跳动明显） -
vertical-align、align-items等对齐属性对其完全无效，因为列不是独立的 flex/grid 项 - 常见错误现象：
height: 100%在子项上无效；margin-bottom表现不稳定；列底边参差不齐是正常行为，不是 bug
display: flex 实现等高列的关键条件
父容器必须提供可计算的交叉轴高度基准，否则 align-items: stretch（默认行为）无空间可拉伸。
- 给父容器加
min-height（如min-height: 300px）或height（如height: 100vh），避免仅靠内容撑高 - 子列不要写
height、max-height或flex: none，否则覆盖默认拉伸 - 含图片的列，需额外加
img { height: 100%; object-fit: cover; }，否则原始尺寸破坏拉伸 - IE10–11 需补
display: -ms-flexbox，但align-self行为不可靠，建议降级为单列或放弃支持
display: grid 中让列自动等高的写法
核心是让所有列落在同一行轨道内，并由内容最高者决定行高，而不是用 1fr 强制分配空间。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 只设
display: grid和grid-template-columns: 1fr 1fr 1fr（或repeat(3, 1fr)），**不写**grid-template-rows - 若需兼容空内容场景，可用
grid-auto-rows: minmax(0, 1fr)，Firefox 下更稳定；Chrome/Safari 用auto即可 - 禁用子项上的
height: 100%—— 它在 grid 中常计算为 0，且干扰行高自适应 - 用
gap控制间距，别混用margin，否则实际间距翻倍且响应式下难预测
别踩的兼容性与语义坑
真正难的不是写对两行 CSS，而是选对层级和上下文。
-
display: table-cell虽能视觉等高，但语义错误、响应式断裂、嵌套受限，现代项目应直接排除 - 不要在 grid 项内部再套一层 flex 去“调高度”，会导致行高计算失控，尤其当子项含绝对定位元素时
- 如果父容器高度来自
body或html，确保它们有height: 100%，否则 flex/grid 的 100vh 或 stretch 会失效 -
columns类属性（如column-gap）仅适用于column-count场景，对 flex/grid 无效，别误配
真正容易被忽略的是：等高只是视觉结果，不是布局目标。你得先明确——是要内容垂直流（用 column-count），还是要结构可控的列容器（用 flex 或 grid）。选错起点，后面所有样式都是在修修补补。
