首选flex或grid实现等高列：flex需父容器有高度基准（如min-height），子项默认align-items: stretch等高；grid只需display: grid和grid-template-columns，列自动等高；禁用float、table-cell和columns。
直接用 display: flex 或 display: grid，别碰 float、table-cell 和 columns —— 前者是语义错误，后两者会破坏 DOM 结构或交互逻辑。
flex 实现等高列必须设 min-height
只加 display: flex 不够，父容器若没高度基准，子项“等高”就无从体现。浏览器不会凭空拉伸到某个未知高度。
- 父容器需有明确高度上下文：比如
min-height: 300px、height: 100vh，或由内容/外部容器撑开 - 子项默认
align-items: stretch，无需额外声明；加height: 100%反而可能覆盖该行为 - 某列不想拉伸？加
align-self: flex-start即可，不影响其他列 - IE10–11 需补
display: -ms-flexbox，但align-self行为不稳定，慎用
grid 实现等高列别显式定义行高
grid-template-rows 不写，或者写成 auto，才是让列等高的关键。一旦写了 1fr 或 minmax(200px, 1fr)，逻辑就变成“按轨道分配”，不是“按最高内容对齐”了。
- 只需
display: grid+grid-template-columns: 1fr 1fr 1fr（或其他比例），列就会在首行自动等高 - gap 比 margin 安全：它不参与子项尺寸计算，也不会因子项数量变化导致塌陷
- Firefox 对
minmax(0, 1fr)处理更严格，适合空内容场景；Chrome 下auto足够 - 子项内若有绝对定位元素，记得给该子项加
position: relative，否则容易溢出
千万别用 columns 做多列卡片或导航
column-count 是为长文本分栏设计的（像报纸），不是布局工具。用在 <section> 或卡片容器上，DOM 会被浏览器强行切片，JS 绑定、焦点、动画全失效。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：
<div class="card">…</div>被切成两块，顺序错乱，点击事件绑不上 - 它不支持子项设
width、margin或display: flex，所有样式控制权交给列流 - 仅适用于纯文本容器，例如
<article>里大段说明文字 - 即使看起来“像三列”，也绝不等于三列布局——本质是单块内容的视觉折行
真正难的不是写对那两行 CSS，而是判断哪一层该用 flex、哪一层该用 grid：flex 控制一维流向（比如主内容区内部卡片横向排列），grid 控制二维结构（比如整个页面的 header / sidebar / main / footer）。混用时，别让 grid 项内部再套 flex 容器去“调高度”，那会让行高计算不可控。
