最稳三栏结构用 grid-template-columns: 200px 1fr 240px，中栏防塌缩用 minmax(300px, 1fr)，IE11 回退 Flex 并用 grid-column-gap 替 gap，全局设 box-sizing: border-box 防错位。
用 display: grid 一行定义三栏结构最稳
现代项目直接写 grid-template-columns: 200px 1fr 240px，左栏 200px、中栏占满剩余、右栏 240px。不用管 HTML 顺序，子元素按源码位置自动填入对应列，天然等高，gap 控制间距也不会塌陷。
常见错误是把 1fr 当成百分比——它实际表示“拿走所有剩余空间”，和 flex: 1 行为一致。想防中间栏塌缩（比如空内容时），改用 minmax(300px, 1fr)。
IE11 不支持 1fr 和 gap，真要兼容就回退到 Flex，并用 grid-column-gap + grid-row-gap 替代 gap。
flex: 1 必须写对，否则中间栏会意外压缩
中间栏别写 flex: 1 1 auto——这会让基准宽度按内容算，长文本或图片一进来，它反而缩窄甚至换行。正确写法是 flex: 1（等价于 flex: 1 1 0%），强制从 0 开始占满剩余空间。
立即学习“前端免费学习笔记（深入）”；
左右栏推荐用 flex: 0 0 200px，而不是单纯 width: 200px：前者禁伸展、禁缩放，更稳妥；后者在 flex 容器里可能被意外拉伸。
额外加一条 min-width: 0 到中间栏，防止内部图片或长单词强行撑宽导致布局错乱。
响应式断点里最容易漏掉的两件事
小屏切单列不能只靠 grid-template-columns: 1fr 就完事，必须在 @media (max-width: 768px) 里显式重写列定义，否则三栏还在横排挤成一团。
如果主内容语义上要优先（比如 SEO 或读屏器），得加 order: -1 给中间栏，而不是依赖 DOM 顺序硬调——否则 Grid/Flex 重排后逻辑就乱了。
别在 Grid 或 Flex 容器里混用 float 或 position: absolute，它们会直接退出布局上下文，调试时根本找不到原因。
盒模型不统一是 90% 错位问题的根源
写了 width: 200px 却发现实际占了 220px？八成是没设 box-sizing: border-box。全局加 * { box-sizing: border-box; }，否则 padding: 10px + width: 200px = 实际占用 220px。
所有参与栅格计算的元素（如 .left、.center）别直接加 margin 控制间距——它会干扰空间分配逻辑。该用 gap 就用 gap，可靠且不塌陷。
真正难处理的从来不是“怎么写出来”，而是“改需求时还能不能快速对齐逻辑”。比如中间栏突然要加滚动、右侧栏要随视口固定，这些延伸需求一旦叠加，浮动或绝对定位方案基本就废了。
