别再死磕圣杯布局了，这三套三栏方案够你用十年

提到网页布局，很多刚入行的朋友一听到“三栏”就头大。左导航、中间内容、右广告，经典的左右固定中间自适应模式，在早年可是面试必考题。那时候我们得用浮动（float）或者绝对定位折腾半天，还要防着元素乱跳。现在浏览器兼容性好了，其实没必要那么苦哈哈。今天不扯理论，直接聊聊实际项目中，怎么最快又最稳地搞定三栏布局。

Flexbox 是最快的上手方案

现在的标准答案非 Flexbox 莫属。它的核心逻辑很简单：父容器设为弹性盒，子元素自动撑开。想要中间内容区灵活变化，两边固定宽度？给两个侧边栏定个 width: 200px，中间剩下的设置 flex: 1 就完事了。这种方式写起来代码量少，而且天然支持垂直居中对齐。

遇到侧边栏需要高度跟随页面变动的情况，Flex 也完全 hold 住，不需要像以前那样去计算 height 值。这种一维布局方式对于大多数运营活动页、个人博客已经绰绰有余。不过要注意，如果是在极老的 IE 环境维护项目，这套方案就得绕道走，不然白屏风险极大。

Grid 网格适合复杂后台

如果觉得 Flex 在处理二维空间时有点力不从心，CSS Grid 就是你的救星。网格布局让行列控制变得像表格一样直观。你可以直接在父级定义 grid-template-columns: 200px 1fr 200px，瞬间就能得到想要的三栏结构。

Grid 的强大在于它能同时处理列和行，适合那种顶部有通栏 Banner，下面才是三栏结构的复杂后台管理系统。它的好处是结构更清晰，改样式时不容易产生副作用。对于追求代码整洁度、团队协作频繁的项目，推荐优先尝试这个方向，维护成本比想象中低很多。

别忘了粘性定位提升体验

布局解决了，还有一个体验痛点：长页面滚动时，侧边菜单是不是经常滑出视野？加上 position: sticky 就能解决这个问题。结合上面的 Flex 或 Grid，只要给侧边栏元素设置 top: 20px，它会在滚动到指定位置后吸附在窗口上方。

这招特别适合做左侧导航栏或者右侧目录索引。切记不要用 fixed，否则脱离文档流会让下方内容塌陷，sticky 的优势就是既粘滞又不破坏原有排版流。配合简单的过渡动画，交互质感立马提升一个档次。

移动端适配才是关键

其实工具没有绝对的优劣，关键看场景。简单展示页用 Flex 足够，复杂后台首选 Grid，交互体验上记得搭配 sticky。别为了炫技堆砌属性，能在一行代码里解决的问题，就别写三行。

随着屏幕尺寸变化，别忘了加上媒体查询，当宽度小于 768px 时，把三栏强制改成单列，隐藏不必要的侧边栏，让内容优先显示。这才是完整的响应式闭环。别让 PC 端的优雅设计在手机端变成灾难，用户体验才是最终评判标准。