CSS Grid: 像拼图游戏一样轻松搞定网页布局

生活中的例子 01

创建一个像 Pinterest 那样的复杂图片墙展示。

生活中的例子 02

设计一个标准的博客布局（包含页眉、侧边栏、文章区和页脚）。

生活中的例子 03

制作一个数据仪表盘，将不同的图表和统计数据整齐排列。

生活中的例子 04

排版一个像杂志一样的网页，文字和图片错落有致。

新手入门指南

CSS Grid 布局：网页排版的“上帝模式”

嘿，未来的前端大师！👋

今天我们要解锁一项让你在网页布局界“横着走”的技能 ——CSS Grid (网格布局)。

如果你曾经因为想把一个盒子放在网页的右下角，或者想让三个图片并排显示而抓耳挠腮，甚至因为float(浮动) 搞得页面乱七八糟而想砸键盘……

深呼吸。那些黑暗的日子结束了。

Grid 就像是给你的网页开启了“上帝模式”。它不再是让你求着浏览器“请帮我把这个放在那儿”，而是让你直接命令浏览器：“给我在这里画个格子，把那个东西扔进去！”

准备好了吗？我们将用最通俗的大白话，配合大量的代码，带你彻底征服 Grid。

---

1. 钩子：装修房子的艺术

想象一下，你买了一套大房子（这就是你的网页）。

在 Grid 出现之前，我们装修房子的方式很笨。比如你想把沙发放在客厅左边，你得小心翼翼地推着沙发（使用float或margin），如果推过头了，沙发可能会从窗户掉出去（布局崩坏）。

而CSS Grid就像是你手里拿了一张蓝图和一支魔法笔。

你站在空房子里，用笔在地板上画线：

• “这里画一条线，那里画一条线。”
• “这一块区域叫‘客厅’，那一块叫‘厨房’。”
• “这一块我要留给‘卫生间’。”

画好格子之后，你只需要打个响指，沙发自动飞进‘客厅’格，马桶自动飞进‘卫生间’格。而且，如果你后来想把客厅变大点，只需要改一下地上的线，家具会自动调整位置。

这就是 Grid 的核心思想：先画格子（定义容器），再放东西（放置子元素）。

---

2. 什么是 CSS Grid？

用技术一点的话说：CSS Grid 是一个二维布局系统。

这里的关键词是“二维”。

• Flexbox (弹性盒子)是一维的。它像是一条贪吃蛇，东西只能横着排成一行，或者竖着排成一列。
• Grid (网格)是二维的。它像一个棋盘，既有行，又有列。你可以同时控制水平和垂直方向。

---

3. 为什么我需要它？

如果你想做一个简单的导航栏，用 Flexbox 挺好。但如果你想做一个复杂的杂志风格排版，或者一个仪表盘 (Dashboard)，Grid 是唯一的王者。

它解决了什么痛点？

• 对齐强迫症的福音：再也不用为了让三个不同高度的盒子底部对齐而写一堆恶心的 hack 代码。
• 顺序无关性：在 HTML 里，你的“广告”代码可能写在最下面，但在屏幕上，你可以用 Grid 把它瞬间变到右上角，而不需要改动 HTML 结构。
• 响应式神器：手机端一列，平板端两列，电脑端三列？用 Grid 只需要改一行代码。

---

4. 核心概念：房东与租客

学习 Grid，你必须分清两个角色：

• Grid Container (容器/房东)：这是父元素。所有的“画格子”命令都是下达给它的。
• Grid Item (项目/租客)：这是子元素。它们乖乖地待在房东画好的格子里。

这是一个简单的图解：

+-----------------------+ <-- 房东 (Container) | +Item 1+ +Item 2+ | | +Item 3+ +Item 4+ | <-- 租客 (Items) +-----------------------+

要开启 Grid 模式，你只需要对房东说一句咒语：

.container { display: grid; }

这就行了？还没。这只是告诉浏览器：“我要开始画格子了”。如果不继续定义行列，看起来跟普通div没啥区别。

---

5. 代码游乐场：手把手教你写

好了，把你的咖啡放下，我们要开始写代码了。我们会从最简单的开始，一点点变复杂。

第一关：Hello Grid (定义列和行)

假设我们有一个容器，里面有 6 个盒子。

HTML:

<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>

CSS (基础美化):

/* 给盒子加点颜色，方便看清楚 */ .box { background-color: #3498db; color: white; padding: 20px; border: 1px solid #2980b9; font-size: 2rem; }

CSS (Grid 魔法):

现在，我要让这 6 个盒子变成3列 2行的布局。

.container { /* 1. 开启 Grid 模式 */ display: grid; /* 2. 定义列 (Columns) */ /* 我想要3列，每列宽度都是 100px */ grid-template-columns: 100px 100px 100px; /* 3. 定义行 (Rows) */ /* 我想要2行，每行高度是 50px */ grid-template-rows: 50px 50px; /* 4. 定义间距 (Gap) */ /* 就像瓷砖之间的缝隙，这里是10px */ gap: 10px; }

发生了什么？浏览器看到了grid-template-columns: 100px 100px 100px，它就在心里画了三条竖线。然后把盒子 1、2、3 放进第一行，盒子 4、5、6 自动挤到第二行。

---

第二关：认识 `fr` 单位 (最强单位)

用px(像素) 写死宽度太土了。现在的屏幕有的宽有的窄。我们要介绍 Grid 专属的单位：`fr` (Fraction，分数/份)。

fr的意思就是：“把剩余空间分成几份，我要占其中几份”。

场景：我想要 3 列。第一列和第三列窄一点，中间那列宽一点（占大头）。

.container { display: grid; /* 解释： 1fr : 第一列占 1 份 2fr : 第二列占 2 份 1fr : 第三列占 1 份 总共是 1+2+1 = 4 份。 如果容器宽 1000px，那么： 第一列 = 250px 第二列 = 500px 第三列 = 250px */ grid-template-columns: 1fr 2fr 1fr; gap: 10px; }

💡 导师提示：尽量多用fr，少用px或%，因为fr会自动帮你计算减去gap之后的空间，永远不会撑破布局！

---

第三关：让元素“跨越”格子 (像合并单元格)

现在我们要玩点高级的。假设盒子1是个大标题，我想让它横跨 3 列。盒子2是个侧边栏，我想让它竖跨 2 行。

这里有个概念叫网格线 (Grid Lines)。

如果你有 3 列，你有几条竖线？答案是4条！| 列1 | 列2 | 列3 |-> 看到了吗？从左到右分别是线1、线2、线3、线4。

代码演示：

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3列 */ grid-template-rows: 100px 100px; /* 2行 */ gap: 10px; } /* 选中第一个盒子 */ .box1 { background-color: #e74c3c; /* 红色，显眼点 */ /* 告诉它：从第1条竖线开始，到第4条竖线结束 */ grid-column-start: 1; grid-column-end: 4; /* 简写方式 (最常用)：grid-column: 1 / 4; */ } /* 选中第二个盒子 */ .box2 { background-color: #f1c40f; /* 黄色 */ /* 告诉它：跨越两行 */ /* 这次我们用 span 关键字，意思就是“跨越” */ grid-row: span 2; /* 这行代码等同于 grid-row: 1 / 3; (假设它在第一行开始) */ }

解释：

• grid-column: 1 / 4并不是说它占了4列，而是说它横跨了从线1到线4的空间（也就是全部3列）。
• span 2这种写法更直观，意思就是“给我占两个坑位！”。

---