Grid布局下不存在真正的双飞翼布局，因其核心约束（中间内容优先渲染+负margin）是为解决IE6–IE7缺陷而生，而Grid天然解耦HTML与视觉顺序，支持grid-template-areas或grid-column等现代方式直接实现三栏布局。
双飞翼布局用 grid 实现，本质上是“套了个名头的普通三栏布局”——它不依赖负 margin、不操心浮动清除、也不需要 HTML 结构刻意把中间内容放最前。真要用 grid，就别再套双飞翼那套逻辑，直接按现代方式写。
为什么 grid 里不存在真正的“双飞翼”
双飞翼的核心约束（中间内容优先渲染 + 侧栏用负 margin 拉入）是为绕过 IE6–IE7 的渲染缺陷而生的。而 grid 是布局层抽象，HTML 顺序和视觉顺序天然解耦：grid-area 或列轨道定义能任意重排元素显示位置，无需靠 DOM 顺序保 SEO —— 现代搜索引擎早已能理解 grid 布局语义。
- 你写
<div class="left"></div><div class="center"></div><div class="right"></div>，照样能让.center在视觉上居中、最先渲染 -
grid-template-columns: 200px 1fr 200px直接定义三栏，左右固定、中间自适应，没任何“预留 padding + 负 margin”环节 - 等高？默认就是等高。不用
overflow: hidden、不用zoom: 1、不用算margin-left: -100%
grid-template-areas 是最接近“双飞翼语义”的写法
如果你坚持想保留“结构语义清晰 + 视觉可配置”的感觉，grid-template-areas 是最贴近原始双飞翼意图的方式：它用命名区域显式声明布局意图，HTML 顺序可以自由安排，CSS 控制呈现位置。
.container {
display: grid;
grid-template-areas:
"header header header"
"left content right"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 80px 1fr 100px;
}
<p>.header { grid-area: header; }
.content { grid-area: content; }
.left { grid-area: left; }
.right { grid-area: right; }
.footer { grid-area: footer; }
-
grid-area值必须和grid-template-areas中的字符串严格一致，大小写敏感 - 每个区域名只能用一次；若某区域需跨多格，写成
"left left content"这样连续字符串即可 - 这种写法对可维护性友好，但略增 CSS 体积；小项目直接用
grid-column/grid-row更轻量
用 grid-column 实现更灵活的“伪双飞翼”
当左右栏宽度不固定、或中间内容要撑满剩余空间且响应式变化时，放弃命名区域，改用线性定位更实际：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
/* 或响应式写法：minmax(200px, 25%) 1fr minmax(200px, 25%) */
}
<p>.left { grid-column: 1; }
.content { grid-column: 2; }
.right { grid-column: 3; }
-
grid-column: 1等价于grid-column-start: 1; grid-column-end: 2;，明确绑定到第一列轨道 - 若想让
.content同时占满中间和右侧（比如移动端折叠右栏），可动态改grid-column: 2 / -1 - 注意：IE 不支持
grid，哪怕加了-ms-前缀也仅限于旧版规范，grid-template-areas在 IE 中完全无效
真正容易被忽略的点是：所谓“grid 双飞翼”，不是把老代码翻译成 grid，而是放弃“双飞翼思维”。它的价值不在兼容性，而在释放布局控制权——你不再需要计算负 margin 是否对得上 padding，也不用担心 overflow: hidden 切掉下拉菜单。只要浏览器支持 display: grid（Chrome 57+、Firefox 52+、Safari 10.1+），就该直接用原生能力，而不是给新工具套旧枷锁。
