display: grid 是实现左中右三栏等高布局最直接可靠的方式，通过 grid-template-columns: 200px 1fr 200px 定义结构，配合 height: 100vh 提供高度上下文，天然等高且无需 hack。
现代项目里，display: grid 是实现左中右三栏等高布局最直接、最可靠的方式——它天然让所有子项等高，无需 hack，也不依赖 DOM 顺序或清除浮动。
用 grid-template-columns 定义三栏结构
核心是父容器启用 Grid，并用 grid-template-columns 明确列宽分配：
- 左右固定宽度（如
200px），中间用1fr占满剩余空间 -
1fr不是百分比，而是“剩余可用空间的 1 份”，会自动避让左右栏 - 若需中间栏最小宽度（比如不能窄于
300px），改用minmax(300px, 1fr) - 父容器必须有明确高度约束（如
height: 100vh或内容撑开），否则空内容时可能塌陷
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
height: 100vh; /* 关键：提供高度上下文 */
}
为什么 flex: 1 在 Flex 布局里也能等高，但有隐含条件
Flex 布局默认让子项在交叉轴（垂直方向）上拉伸，所以三栏天然等高——但这只在父容器设了 align-items: stretch（默认值）且子项未显式设置 align-self 时成立：
- 左右栏写
width: 200px即可，不加flex属性 - 中间栏必须用
flex: 1（等价于flex: 1 1 0%），不是flex: 1 1 auto；后者在内容撑大时可能意外缩放 - 别在子项上乱加
margin，尤其横向 margin 会干扰空间计算；用gap更安全 - IE11 对
flex: 1解析不准，如需兼容，得写全flex: 1 1 0%
用 float 实现等高？别试了，它根本做不到
浮动布局本身不提供等高机制。所谓“等高”只能靠 JS 计算、负 margin 拉伸、或伪元素 hack，全是临时补丁：
-
overflow: hidden清浮动只能防止父容器塌陷，不等于子项视觉等高 - 圣杯/双飞翼靠相对定位 + 负 margin 挤出空间，但高度仍由各自内容决定，无法自动对齐
- 一旦某栏内容变长，其他栏不会同步拉伸，视觉上就错位了
- 响应式切换时，这些方案极易失控，比如小屏下
float还没清除干净就切单列
容易被忽略的关键点
真正让等高“稳住”的不是布局语法本身，而是盒模型和上下文控制：
- 全局加
* { box-sizing: border-box; }，否则width: 200px+padding: 12px= 实际占 224px，破坏列宽预期 -
gap比margin更可靠：它不参与子项尺寸计算，也不会触发 margin collapse - Grid/Flex 中，子项若含长文本且不换行，会撑破容器；需加
word-break: break-word或overflow-wrap: break-word到内容层 - 如果三栏要撑满视口但内容不足，Grid 需配
minmax(0, 1fr)或显式grid-template-rows: 1fr，否则高度塌陷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
