现代项目应弃用“圣杯布局”，改用 display: grid 实现响应式三栏；grid-template-columns 一行定义列结构，minmax() + fr 灵活控制侧栏宽高比与主栏自适应，语义清晰、维护高效。
现代项目里别用“圣杯布局”这个概念做响应式三栏——它本质是为绕过 IE6/7 的 float 缺陷而设计的 hack，语义混乱、维护成本高，且和响应式需求天然冲突。真要实现左中右三栏并响应式适配，display: grid 是最直接、最可控的选择。
为什么 grid-template-columns 比圣杯布局更可靠
圣杯布局依赖负 margin、position:relative 和 padding 预留空间，DOM 顺序必须是中-左-右，且所有宽度都要手动计算；而 grid-template-columns 一行定义列结构，不依赖子项顺序，minmax() + fr 可同时约束侧栏最小宽度和弹性上限，中间栏自动撑满剩余空间。
-
minmax(240px, 25%)表示“至少 240px，最多占容器宽的 25%”，比写死200px更适应不同屏幕 - 子项默认等高，不用额外设
align-items: stretch或 JS 调整高度 -
gap控制间距，不会像margin那样塌陷或破坏栅格计算 - IE11 不支持
gap？用grid-column-gap和grid-row-gap回退即可
移动端必须用 @media 切单列，不能靠 flex-wrap
很多人在 Flexbox 场景下误以为设 flex-wrap: wrap 就能让三栏自动折成两行，结果发现根本不会换行——因为默认 flex-direction: row 下，只要容器够宽，项目就坚决不折。这在窄屏上导致水平滚动，体验极差。
- 正确做法是在
@media (max-width: 768px)中把grid-template-columns改为1fr，三栏垂直堆叠 - 如果主内容需优先渲染（如 SEO），加
.main { order: -1; }，无需移动 DOM - 平板断点（768px–1024px）可只隐藏一侧边栏：
.sidebar-right { display: none; }，而非粗暴全切
flex-basis 和 flex-shrink 必须显式控制，别只写 flex: 1
三栏都设 flex: 1 会导致等宽、无主次，小屏下全部挤压变形，不是“响应式”，是“被压缩”。
立即学习“前端免费学习笔记（深入）”；
-
.main { flex: 1 1 60%; }：主内容优先占 60%，可缩但有底线 -
.sidebar-left { flex: 0 0 220px; }：不放大、不缩小、基线固定 - 中屏（如 992px）可微调：
.main { flex: 1 1 50%; }，侧栏缩到180px - 切方向前先重置子项：
.column { flex: none; width: 100%; }，否则flex: 1会继续拉伸高度
真正难的不是写出三栏，而是让侧栏在 320px 宽的手机上不压成一条线、不消失、不触发横向滚动——这取决于你是否用 minmax() 给它设了合理下限，以及是否在第一个媒体查询里就果断切单列。其他所有技巧，都是在这个前提下才有意义。
