grid-template-columns 是最稳的写法，一行定义结构、天然等高、无需清浮动或依赖 dom 顺序；配合 gap、min-height、box-sizing 等控制可确保响应式下三栏稳定等高。
直接用 display: grid 或 display: flex，别碰 float、table-cell 或负 margin——那些方案在内容变化或响应式切换时，高度立刻不一致。
为什么 grid-template-columns 是最稳的写法
一行定义结构，天然等高，不用管子项顺序、不用清浮动、不依赖 DOM 排列。grid-template-columns: 200px 1fr 200px 表示左栏固定 200px、中间拿走所有剩余空间、右栏固定 200px；1fr 不是百分比，而是“剩余空间的 1 份”，和 flex: 1 行为一致。
- 父容器必须有明确高度上下文，比如
min-height: 100vh，否则空内容时三栏会塌成一条线 - 列间间隙统一用
gap: 12px，别用margin——后者会干扰栅格计算，还可能触发 margin collapse - IE11 不支持
gap和1fr，真要兼容，得回退用grid-column-gap+grid-row-gap，并避免1fr（改用具体像素或百分比）
flex: 1 必须写对，否则中间栏会缩窄甚至换行
很多人写 flex: 1 1 auto，结果长文本或图片一进来，中间栏就被压缩——这不是 bug，是预期行为：因为 auto 以内容宽度为基准，而 flex: 1（等价于 flex: 1 1 0%）才真正让中间栏“主动占满剩余空间”。
- 左右栏推荐用
flex: 0 0 200px（不放大、不缩小、固定宽），比单纯width: 200px更稳妥 - 中间栏加
min-width: 0，防止内部长单词或图片强行撑宽导致布局错乱 - 父容器默认
align-items: stretch，只要子项没设align-self: flex-start或height，就会自动等高
响应式断点里最容易漏掉的两件事
小屏下三栏横向挤成一团，不是只改 grid-template-columns: 1fr 就完事。
- 必须在
@media (max-width: 768px)里显式重写列定义或改flex-direction: column，否则布局逻辑还在横排 - 别用
display: block覆盖 Grid/Flex 容器，会彻底破坏布局上下文 - 如果主内容区要优先被读屏器识别，加
order: -1给<main></main>元素，而不是靠 DOM 顺序硬调
真正让等高“稳住”的不是语法本身，而是盒模型控制和布局上下文隔离：全局加 * { box-sizing: border-box; }，别在 Grid/Flex 子项上混用 float 或 position: absolute——它们会直接退出布局流，调试时根本找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
