现代项目不推荐圣杯/双飞翼布局，应改用flexbox或grid：前者适合高度不敏感场景，后者支持等高、间距、对齐及响应式函数如minmax()和clamp()。
纯 CSS 实现响应式三栏布局，现在不推荐用圣杯或双飞翼——它们是为 IE6/7 兼容设计的浮动+负边距方案，现代项目里写这些等于主动给自己加维护债。
为什么圣杯布局在现代项目中会出问题
圣杯布局依赖 padding 预留侧边栏空间 + position: relative 微调 + overflow: hidden 清浮动，看似精巧，实际有硬伤：
-
padding值必须与侧边栏宽度严格一致，一旦改宽（比如响应式下左栏从 200px 变成 240px），.container的padding和所有left/right的left/right值都得同步改，极易漏掉 -
margin-left: -100%在 flex/grid 时代已无语义，且在缩放、字体放大等辅助场景下容易错位 - 要实现等高，得靠
padding-bottom: 10000px+margin-bottom: -10000px这种“障眼法”，不仅难理解，还会干扰getBoundingClientRect()等 JS 计算 - 所有元素都
float: left，导致无法使用display: contents、gap、align-items等现代布局能力
双飞翼布局比圣杯稍好，但本质没变
双飞翼把主内容包进 .inner，用 margin 替代部分 position 调整，代码结构略清晰，但核心问题一个没少：
- 仍强依赖固定像素宽度（如
width: 200px）和对应负边距（margin-left: -200px） -
.center必须设float: left; width: 100%，导致内部flex子项的justify-content: center失效 - 响应式断点一多，媒体查询里要重复覆盖所有浮动、负边距、定位属性，CSS 体积和可读性双双恶化
- 无法响应视口单位（如
vw）、minmax()或容器查询（@container）
真正可行的响应式三栏方案只有两个
直接用现代 CSS 原语，省去中间层抽象：
-
Flexbox 方案：对三栏高度一致性要求不高时，用
display: flex+flex: 1主内容 +flex: 0 0 240px侧边栏，配合@media切换flex-direction即可适配移动端 -
Grid 方案：对等高、间距、对齐有明确要求时，用
display: grid+grid-template-columns: 240px 1fr 240px，再用grid-template-areas控制 DOM 顺序，subgrid（若支持）还能继承父级行轨道
两者都天然支持 minmax(240px, 1fr)、clamp()、aspect-ratio，JS 获取尺寸也稳定。真要兼容 IE11，用 Autoprefixer + postcss-flexbugs-fixes 就够了，远比维护两套浮动逻辑干净。
最后提醒一句：圣杯和双飞翼的“精妙”只存在于 2006–2012 年的浏览器限制里；今天还手写它们，不是怀旧，是给团队埋雷——尤其是当某天产品提出“左栏在平板横屏时收起，点击按钮呼出”这种需求时，浮动负边距的 patch 会越打越多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
