圣杯布局用 grid 实现更直观可控，推荐用 grid-template-areas 声明区域、grid-area 指派元素，三栏宽度按需设为固定+弹性+自适应，注意命名线、响应式同步更新及 ie11 兼容性限制。

圣杯布局用 Grid 实现，根本不需要浮动或负 margin

Grid 的 grid-template-areas 和显式网格线（如 grid-column-start）已经能直接描述“头-侧-主-侧-尾”这种经典结构，比 Flex + hack 方案更直观、更可控。

关键不是“能不能”，而是怎么避免把简单结构写复杂。很多人一上来就堆 grid-column: 1 / -1 或滥用 span，结果语义混乱、响应式难改。

• 用 grid-template-areas 声明区域名（如 "header header header" "nav main aside" "footer footer footer"），再用 grid-area 给每个元素指派——可读性高，后期加广告位/新栏也只改一行字符串
• 三栏宽度别全写 1fr：左侧导航通常固定（240px），主内容弹性（1fr），右侧边栏收窄（300px 或 minmax(280px, 0.8fr)）更符合实际需求
• 注意 grid-template-rows 中的 auto 和 minmax() 组合：头部高度不确定时，auto 比死写 60px 更健壮；但 footer 若需始终贴底，得配合 min-height: 100vh 或 grid-template-rows: auto 1fr auto

用网格线定位时，grid-column 的起止值容易写反

写成 grid-column: 3 / 1 不报错，但会渲染为空白——CSS Grid 规定：若起始线号大于结束线号，该轨道不显示（等效于 grid-column: 1 / 1）。

真实项目里，这种错误常出现在动态生成样式或复用旧代码时。比如从两栏改成三栏，忘了调换 main 的列范围。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 始终按“左→右”顺序写：左侧栏 grid-column: 1 / 2，主内容 grid-column: 2 / 3，右侧栏 grid-column: 3 / 4
• 用命名线替代数字更安全：定义 grid-template-columns: [nav-start] 240px [nav-end main-start] 1fr [main-end aside-start] 300px [aside-end]，然后元素直接写 grid-column: nav-start / nav-end
• 浏览器 DevTools 的 Layout 面板里勾选 “Show line numbers” 能立刻看出线序是否连贯

响应式断点下，grid-template-areas 切换要同步重排所有区域

只改 grid-template-areas 字符串，却不调整对应元素的 grid-area，会导致区域名对不上——例如桌面端定义了 aside，移动端没声明却仍给某个 div 设置 grid-area: aside，它就会被挤到默认位置（通常是第一行第一格）。

• 移动端优先？那就先写单列："header" "main" "nav" "footer"，再在 @media (min-width: 768px) 里覆盖为三栏布局
• 别在不同媒体查询里混用同一套区域名：比如桌面用 aside，平板改用 sidebar，但 HTML 里还是 class="aside" —— 这会让维护者困惑，也增加 JS 动态操作的难度
• 如果某区域在小屏下隐藏，别只靠 display: none：应同时删掉其 grid-area 声明，或改用 grid-area: auto，否则它仍占网格轨道（尤其当用了 grid-auto-flow: dense 时）

IE11 兼容性是个硬坎，别信“加前缀就能用”

IE11 的 Grid 实现是基于 2011 年草案的旧语法，grid-template-areas、grid-gap、minmax() 全都不支持，且自动放置行为（grid-auto-flow）和现代标准差异极大。

想真兼容 IE11，就得准备两套方案：Grid 用于现代浏览器，Flexbox 或 float 用于 IE——而不是指望 Autoprefixer 或 postcss-grid-kiss 之类工具兜底。

• 检测手段别用 @supports (display: grid)：IE11 会假阳性通过（因为它识别 display: -ms-grid，但不等于支持标准 Grid）
• 稳妥做法是用 JS 特性检测：typeof window.CSS !== 'undefined' && CSS.supports('display', 'grid')，再动态加载降级样式
• 如果项目明确要求支持 IE11，建议整个布局层回归 Flexbox：用 flex-direction: column + order 控制顺序，虽不如 Grid 灵活，但稳定、可预测

Grid 布局的简洁性建立在现代规范基础上，强行往旧环境里塞，反而会让结构更难维护。真正需要处理的，是那些“必须兼容 IE11”的遗留系统——它们往往早该被重构，而不是靠一层又一层的兼容补丁撑着。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！