grid 是实现三栏等高最直接方案，因其天然支持子项拉伸对齐最高栏；flex 方案需确保父容器高度有效且子项未禁用拉伸；float 和 inline-block 已不推荐。
用 display: grid 实现三栏等高最直接
三栏等高本质是让三列内容区域高度自动对齐到最高那一栏，grid 天然支持。不需要 JS、不需要 hack、不依赖内容顺序。
关键点在于：容器设为 display: grid，用 grid-template-columns 定义三列，子元素默认拉伸填满行高。
- 必须给父容器显式定义
grid-template-columns（比如1fr 2fr 1fr或300px 1fr 300px） - 子元素无需设
height或min-height，也不用align-items—— 默认就是stretch - 如果某栏内容极少，它仍会和最高栏等高；背景色、边框会自然撑开
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
.layout > div {
background: #f5f5f5;
padding: 16px;
}
用 display: flex 实现三栏等高要注意容器高度来源
flex 方案可行，但容易失效——因为 flex 子项的等高依赖于父容器有明确高度或能被内容撑开。若父容器高度为 auto 且子项本身高度不一致，可能看起来“不等高”。
- 确保父容器没有
height: 0、min-height: 0或overflow: hidden等压制高度的设置 - 子项默认就是
align-items: stretch，无需额外写 - 避免给子项设
flex: 0 0 auto或align-self: flex-start，这会主动放弃拉伸 - 若父容器是
body直接子元素，记得检查body是否有display: flex且没设flex-direction: column，否则子项不会按行布局
.layout {
display: flex;
gap: 20px;
}
.layout > div {
flex: 1; / 等分宽度，同时保持拉伸 /
background: #f5f5f5;
padding: 16px;
}
不要用 float 或 inline-block 搞三栏等高
这两种老方案在现代布局中已无必要，强行实现等高成本高、副作用多：
立即学习“前端免费学习笔记（深入）”；
-
float必须清除浮动，且等高需靠padding-bottom: 9999px+margin-bottom: -9999px这类 hack，响应式下极易错位 -
inline-block受制于行内元素默认基线对齐，要等高得加vertical-align: top，但无法解决内容高度差异带来的容器高度塌陷问题 - 两者都不支持
gap，间距靠margin易产生首尾多余空白 - IE10+ 虽支持
flex和grid，但若真要兼容 IE9 及更早，应整体重构交互逻辑，而非硬套等高视觉
等高 ≠ 内容可视区等高，背景与边框才是关键
很多人以为“等高”是要让文字行数一致，其实不是。浏览器渲染的是元素盒模型高度，只要 height 或 min-height 一致，或通过 grid/flex 拉伸，背景、边框、阴影就会对齐。文字多的栏会自动换行，文字少的栏留白即可。
- 若想控制文字区域最小高度（比如卡片标题下方始终留空），可在子项内部加一层包裹元素并设
min-height - 避免给子项设
height: 100%，除非父容器有明确高度——否则 100% 会计算为 0 - 调试时用浏览器开发者工具选中元素，看 computed height 是否一致，比肉眼判断更可靠
实际项目里，grid 是首选；只有需要支持 Safari 9–10（2015 年旧版）且不能用 autoprefixer 补全时，才退回到 flex 并仔细检查父容器的高度上下文。
