CSS Academy · 课时

使用 Grid 构建圣杯布局

Q: 「使用 Grid 构建圣杯布局」这节课中我会学到什么？

使用 CSS Grid 实现经典圣杯布局，包括页眉、页脚、主体和两个侧边栏。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS Grid 实现经典圣杯布局，包括页眉、页脚、主体和两个侧边栏。

使用 Grid 构建圣杯布局 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是圣杯布局

圣杯布局是一种经典的网页设计模式：页面占满整个高度，包含标题栏、页脚，以及中间的三列区域（左侧边栏、主要内容、右侧边栏）。使用浮动布局实现它曾经非常困难，而 CSS 网格让这一过程变得十分简单。

网格模板定义

使用命名的模板区域和行来定义布局：grid-template-areas 会映射视觉结构。三列三行的设置（标题栏跨越所有列，页脚跨越所有列，中间区域包含三列）可以通过易读的 ASCII 图完整表达整个布局。

  <header>Header</header>
  <div class="sidebar">Sidebar</div>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>

将元素分配到区域

每个子元素通过名称引用其所在区域：header { grid-area: header }、main { grid-area: main }、nav { grid-area: sidebar }、aside { grid-area: aside }、footer { grid-area: footer }。网格会自动放置这些元素。

扩展中间行

中间行使用 1fr，在固定高度的标题栏和页脚之后填满所有剩余的视口高度。这样可以确保侧边栏和主要内容始终扩展以填满视口，无需计算明确的高度。

响应式折叠

在移动设备上，使用媒体查询将网格模板区域重新定义为单列堆叠布局：标题栏、侧边栏、主要内容、辅助栏和页脚垂直排列。DOM 顺序保持不变，只有视觉网格模板发生变化。网格区域让响应式重构更加清晰易读。

  <header>Header</header>
  <div class="sidebar">Sidebar</div>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>

响应式隐藏侧边栏

在平板设备上，可以移除右侧辅助栏并扩展主要内容：重新定义为 "header header" "sidebar main" "footer footer"，并使用 grid-template-columns: 240px 1fr。可以设置 aside { display: none }，也可以在区域定义中将它移到主要内容下方。

间隙与内边距

使用 gap: var(--spacing-4) 在网格轨道之间添加间隙。应将内边距应用到每个区域内部，而不是网格容器上，以保持间距一致。标题栏和页脚通常需要单独设置水平内边距，并与网格的最大宽度对齐方式保持一致。

嵌套网格

主要内容区域本身也可以是一个网格——例如在主要区域内部创建一个两列的文章加侧边栏布局。嵌套网格可以在页面外壳布局中创建内容布局，无需复杂的类层级或多层嵌套定位。

粘性标题栏

让标题栏保持粘性：header { position: sticky; top: 0; z-index: 10; }。在网格布局中，对网格子元素使用粘性定位可以正常工作——标题栏保持固定，而主要内容、侧边栏和辅助栏在其下方滚动。

圣杯布局中的粘性侧边栏

两个侧边栏都可以设置为粘性：nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }。主要内容滚动时，它们会保持可见，从而形成只有中间区域滚动的三面板布局。

页面布局中的网格与弹性盒

对于圣杯布局这类二维页面外壳布局，应使用网格——网格擅长同时将元素放置到命名的行和列中。在网格区域内部，对于一维组件布局（例如横向排列的导航项目或纵向排列的卡片内容），应使用弹性盒布局。

知识检查

对于响应式圣杯布局，为什么网格模板区域特别有用？

总结

CSS 网格让过去难以实现的圣杯布局变得十分简单：grid-template-areas 为各区域命名，1fr 让中间行填满视口高度，媒体查询则重新定义区域映射以实现响应式折叠。粘性标题栏和侧边栏也可以叠加使用，无需增加额外复杂性。

常见问题解答

「使用 Grid 构建圣杯布局」课时是免费的吗？

是的 — 「使用 Grid 构建圣杯布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 Grid 构建圣杯布局」这节课中我会学到什么？

使用 CSS Grid 实现经典圣杯布局，包括页眉、页脚、主体和两个侧边栏。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Grid 构建圣杯布局」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy