第 6 章 · Grid 布局与响应式设计
本章目标：掌握 CSS Grid 二维布局与移动优先响应式策略，为 academy-demo 搭建整页骨架、课程矩阵与贴底页脚，并理解 Flex 与 Grid 的分工边界。
学时建议：2.5 小时（含 50 分钟跟练与自检）
前置：frontend-web ch05（Flexbox）；理解媒体查询与 viewport 元标签。
6.1 Grid 在 academy-demo 中的架构
┌──────────────────────────────────────────── header (跨全列) ────┐
│ logo nav actions │
├──────────────┬──────────────────────────────────────────────────┤
│ sidebar │ main：hero + course-grid │
│ (可选) │ │
├──────────────┴──────────────────────────────────────────────────┤
│ footer (跨全列，贴底) │
└─────────────────────────────────────────────────────────────────┘| 区域 | 布局技术 | 说明 |
|---|---|---|
整页 .page | Grid | 行：头 / 主 / 脚；列：侧栏 + 主区 |
| 顶栏内部 | Flex（ch05） | 一维对齐 |
课程列表 .course-grid | Grid + 媒体查询 | 1 → 2 → 3 列 |
| 单卡片内部 | Flex | 标题、描述、底栏 |
6.2 Grid 基础：轨道与间隙
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* row-gap / column-gap 可分开写 */
}| 属性 | 示例 | 说明 |
|---|---|---|
grid-template-columns | 240px 1fr / repeat(3, 1fr) | 列轨道定义 |
grid-template-rows | auto 1fr auto | 行轨道定义 |
grid-column | 1 / -1 / span 2 | 跨列 |
grid-row | 2 / 3 | 跨行 |
place-items | center | align-items + justify-items |
place-content | center | 网格在容器内整体对齐 |
fr 单位：分配剩余空间的分数；1fr 2fr 表示第二列占剩余空间两倍。
minmax()：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));自动在容器宽度内尽可能多放列，每列最小 280px——适合课程卡片矩阵（无需手写三个断点，但需理解行为差异）。
6.3 实战：academy-demo 整页 Grid
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>academy-demo · 贤紫技术学院</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body class="page">
<header class="site-header">…</header>
<aside class="site-sidebar" aria-label="课程分类">
<nav>
<a href="#">前端</a>
<a href="#">运维</a>
<a href="#">架构</a>
</nav>
</aside>
<main class="site-main">
<section class="hero">…</section>
<section id="courses" class="section">
<h2>全部课程</h2>
<div class="course-grid">
<article class="course-card">…</article>
<!-- 更多卡片 -->
</div>
</section>
</main>
<footer class="site-footer">
<p>© 2026 academy-demo · 贤紫技术学院</p>
</footer>
</body>
</html>/* 桌面：侧栏 + 主区；移动：隐藏侧栏或改为顶栏下方 */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh; /* 动态视口，避免移动端地址栏影响 */
}
.site-header {
grid-column: 1 / -1;
}
.site-main {
grid-column: 1 / -1;
padding: 0 clamp(16px, 4vw, 48px) 48px;
}
.site-footer {
grid-column: 1 / -1;
padding: 24px;
text-align: center;
border-top: 1px solid var(--color-border, #e2e8f0);
color: var(--color-muted, #64748b);
}
@media (min-width: 992px) {
.page {
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
.site-header { grid-column: 1 / -1; }
.site-sidebar {
grid-row: 2;
grid-column: 1;
padding: 24px 16px;
border-right: 1px solid var(--color-border, #e2e8f0);
}
.site-main {
grid-row: 2;
grid-column: 2;
}
.site-footer { grid-column: 1 / -1; }
}min-height: 100vh + grid-template-rows: auto 1fr auto 使 footer 在内容不足时仍贴底。