Grid 是 CSS 原生提供的二维布局系统，让你像画表格一样精准定义行、列、区域和间距。它不是 Flexbox 的替代品，而是互补工具：**Flexbox 用于组件内部排版，Grid 用于整体页面结构**。
为什么选择 CSS Grid？
- ✅ 真正的二维控制：同时定义行和列
- ✅ 直观的区域命名（
grid-template-areas） - ✅ 自动响应式：配合
fr单位和minmax() - ✅ 所有现代浏览器全面支持（包括移动端）
一句话总结：想搭页面骨架？用 Grid。想调组件细节？用 Flexbox。
基础语法：三步创建网格
- 将容器设为网格：
.container { display: grid; } - 定义列和行：
.container { grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 100px; }这里表示：3 列（第一列固定 200px，后两列平分剩余空间），2 行（第一行自适应内容，第二行固定 100px）。
- （可选）放置子元素：通过
grid-column/grid-row或命名区域定位。
实战案例 1：经典网页布局（页眉 + 侧边栏 + 主体 + 页脚）
用 Grid 几行代码就能实现传统“圣杯布局”：
<div class="page">
<header>页眉</header>
<aside>侧边栏</aside>
<main>主要内容</main>
<footer>页脚</footer>
</div>.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr;
min-height: 100vh;
}
.page > header { grid-area: header; background: #3498db; }
.page > aside { grid-area: sidebar; background: #2c3e50; color: white; }
.page > main { grid-area: main; background: #ecf0f1; padding: 16px; }
.page > footer { grid-area: footer; background: #7f8c8d; }✨ 关键点：grid-template-areas 让你用“可视化字符串”定义布局，清晰又易维护。
实战案例 2：响应式图片画廊
想要一个自动换行、等宽等高的图片网格？Grid 的 repeat() + minmax() 是神器：
<div class="gallery">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- 更多图片... -->
</div>.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
}
.item {
background: #ddd;
aspect-ratio: 1 / 1; /* 正方形 */
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}📱 效果：在大屏显示多列，在手机上自动变成单列，且每项保持正方形比例。
核心概念速览
| 概念 | 说明 | 示例 |
|---|---|---|
fr 单位 |
“fraction”单位，表示剩余空间的比例 | 1fr 2fr → 第二列是第一列的两倍宽 |
repeat() |
重复列/行定义 | repeat(3, 1fr) = 三等分 |
minmax(min, max) |
定义轨道的最小/最大尺寸 | minmax(100px, 1fr) |
gap |
网格线之间的间距 | gap: 10px; |
grid-area |
给子元素命名，用于 grid-template-areas |
grid-area: main; |
Grid vs Flexbox：怎么选？
别纠结“哪个更好”，关键看场景：
- ✅ 用 Grid 当你需要：
- 整体页面结构（如 header / sidebar / main / footer）
- 对齐行和列（如表单、仪表盘、日历）
- 元素跨多行或多列
- ✅ 用 Flexbox 当你需要：
- 单行或单列内的对齐（如按钮组、导航栏）
- 内容动态伸缩（如聊天消息气泡）
- 垂直居中（依然最简单！）
现实中，**一个页面往往同时使用两者**：Grid 搭骨架，Flexbox 调细节。
学习建议
- 动手玩：CSS Grid Garden（游戏化学习，超有趣）
- 调试技巧：在 Chrome DevTools 中选中网格容器，勾选 “Display line numbers” 和 “Show area names”
- 不要怕写“实验性布局”——Grid 让你快速试错，迭代设计
结语
CSS Grid 解放了前端开发者对复杂布局的恐惧。它让我们不再依赖浮动、绝对定位，甚至不再需要框架（如 Bootstrap）来实现基本网格。
掌握 Grid 后，你会发现：**设计稿到代码的距离，比想象中更近**。
接下来，我计划写一篇关于 **“用 HTML + CSS 从零搭建个人博客首页”** 的综合实战，把前面学的 HTML 结构、CSS 基础、Flexbox 和 Grid 全部串起来。敬请期待！
如果你有任何布局难题，或者想看某个具体案例的实现，欢迎留言告诉我 👇
— Han