display: grid 是圣杯布局首选方案；需显式配对 grid-template-areas 与 grid-area，移动端须重定义区域顺序，DOM 结构优先级决定首屏性能、SEO 和无障碍体验。
现在用 HTML 响应式模板实现圣杯布局，display: grid 是首选方案；display: flex 仅在需兼容 IE10–11 时考虑；浮动+负 margin 已无实际价值，只用于读老代码。
grid-template-areas 必须和 grid-area 显式配对
很多人写了 grid-template-columns: 200px 1fr 200px 就以为三栏成了，结果 <main></main> 还是堆在顶部——因为没声明区域映射。浏览器不会自动把 <main></main> 标签名当成 grid-area 值。
-
grid-template-areas每行引号内单词数必须一致，比如"header header header"和"left main right"都是三个词 - 每个子元素必须显式设置
grid-area，例如main { grid-area: main; }，不能只靠 class 名或标签名 - 写成
grid-area: "main"（带引号）会解析失败，正确写法是grid-area: main; - 漏掉
grid-template-areas，只设列轨道，所有内容默认落入第一格，视觉上全叠在一起
移动端响应式要重定义 grid-template-areas
桌面端写成 "left main right"，小屏下不能只改 grid-template-columns: 1fr 就完事。否则 left 和 right 仍试图挤进同一行，导致溢出或错位。
- 移动端应同步更新
grid-template-areas，例如"header" "main" "left" "right" "footer"，让侧边栏自然沉底 - 每行一个区域名，顺序即 DOM 渲染流顺序，也决定屏幕阅读器朗读顺序
- 若想让侧边栏在小屏“悬浮”，别硬塞进网格，改用
position: sticky或抽离为独立逻辑 - 不建议在媒体查询里反复修改
order值——Flex 下易触发重排，iOS Safari 卡顿明显
flex 实现时 order 值冲突风险高
order 看似简单，但它是全局排序值，在嵌套 Flex 容器、动态插入节点或 SSR 渲染时极易错乱。比如 .left { order: 1; } 和 .right { order: 1; } 会按 DOM 顺序排列，而非你预期的左右关系。
立即学习“前端免费学习笔记（深入）”；
- 必须用互斥的小整数：如
.left { order: -1; }、.main { order: 0; }、.right { order: 1; } - 父容器若设
flex-direction: column，order会按垂直方向重排，三栏直接变上下堆叠 -
flex: 1不等于“占满剩余宽度”——它等价于flex: 1 1 0%，中间栏可能塌缩；应设flex: 0 1 auto优先按内容展开 - 左右栏不能只写
width: 200px，必须用flex: 0 0 200px，否则在 Flex 容器中会被压缩
真正难的不是写出能跑的代码，而是保证 <main></main> 在 HTML 中永远排第一——这决定了首屏加载速度、SEO 权重分配、屏幕阅读器播报顺序。所有 CSS 技巧，都是为守住这个 DOM 位置服务的。漏掉这点，再“响应式”的模板也只是视觉幻觉。
