Grid是实现三栏布局最稳选择；flex仅在需兼容IE11或强依赖动态等高时考虑；float和absolute应避免。
现代项目里，display: grid 是实现左右三栏布局最稳、最不易出错的选择；display: flex 仅在需兼容 IE11 或对动态等高有强依赖时才考虑。用 float 或 position: absolute 写三栏，不是“能不能做”，而是“做完之后谁来修”。
grid-template-columns 一行定结构
直接在父容器上写 grid-template-columns: 200px 1fr 240px，就完成了左栏固定 200px、中栏占满剩余空间、右栏固定 240px 的布局。这个写法天然等高、语义清晰、响应式切换干净。
-
1fr不是百分比，它代表“拿走所有剩余空间”，和flex: 1行为一致 - 想保中间栏最小宽度？改用
minmax(300px, 1fr)，否则空内容时可能塌成一条线 - 列间间隙统一用
gap: 12px，别用margin——后者会干扰栅格计算，还容易塌陷 - 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，防止内部图片或长单词强行撑宽导致布局错乱 - HTML 中间栏元素必须放在 DOM 顺序的正中间，否则
flex: 1会分配给错的元素
响应式断点里最容易漏掉的两件事
小屏切单列不是只改 grid-template-columns: 1fr 就完事。必须在 @media (max-width: 768px) 里显式重写列定义，否则三栏还在横排挤成一团。
立即学习“前端免费学习笔记（深入）”；
- 别用
display: block覆盖 Grid，会彻底破坏布局上下文 - 如果主内容要优先被读屏器或搜索引擎识别，加
order: -1给main元素，而不是靠 DOM 顺序硬调 - 平板断点（768px–1024px）可选择性隐藏一侧边栏：
.sidebar-left { display: none; }，但别忘了同时清理相关 margin 或 padding
别在 Grid/Flex 容器里混用 float 或 position
一旦在 display: grid 或 display: flex 的父容器里给子项加 float: left 或 position: absolute，该子项就直接退出布局上下文——它不再参与栅格/弹性流计算，调试时根本找不到它为什么“消失”或“错位”。
真正麻烦的不是语法本身，而是混合不同布局逻辑：比如用 flex-wrap: wrap 试图让三栏在窄屏自动折行，结果发现根本不会折，因为默认 flex-wrap: nowrap。这类细节漏一个，调试时间远超重写成本。
