布局
Grid 布局入门指南
详细介绍 CSS Grid 布局的基本概念、属性及实战应用，帮助前端入门者快速掌握 Grid 技能。
🎯 引言
最近几年，随着网页布局需求越来越复杂，传统的布局方式开始显得有些力不从心。Flexbox 虽然解决了很多一维布局问题，但在二维布局上还是有限制。于是 CSS Grid 布局应运而生，它让我们能够更方便、更灵活地控制网页的二维布局。本文是面向初学者的 Grid 布局入门指南，帮助大家从零开始了解 Grid 的基本概念、核心属性，掌握用 Grid 实现各种常见网页布局的技能。
你学会后，可以轻松搭建响应式网格、宫格、复杂的卡片布局，甚至控制页面的版面结构，极大提升前端开发效率和网页的可维护性。
🧱 什么是 CSS Grid？
CSS Grid 是 CSS3 引入的一种二维布局系统。它可以让我们把页面划分成行和列两维空间的网格，然后把内容放进各个网格单元中。这个“网格”概念非常直观，就像现实中的棋盘或表格一样。
相比之前常用的布局方式（如浮动、定位、Flexbox），Grid 最大的优势在于它同时支持行和列的排布，而不仅仅是一维的排列。
CSS Grid 的核心思想
- 定义一个网格容器（Grid container）
- 在容器内定义行（row）和列（column）
- 把子元素（Grid item）放进网格单元（grid cell）
- 控制子元素跨行跨列显示，实现复杂布局
简单理解，Grid 布局就是给网页内容画了一个“表格”，你可以自由控制每个“格子”里的内容如何显示和占据空间。
📐 Grid 的基本概念和属性
先弄清几个重要概念：
| 名称 | 说明 |
|---|---|
| Grid 容器 | 使用 display: grid 声明的父容器 |
| Grid 项目 | 容器内部的直接子元素 |
| Grid 线 | 网格的分割线，有横向和纵向两种 |
| Grid 单元格 | 由相邻的 Grid 线围成的单个格子 |
| Grid 区域 | 由多个相邻单元格组成的矩形区域 |
容器属性
| 属性 | 作用 | 示例 |
|---|---|---|
| display | 声明网格容器 | display: grid; |
| grid-template-columns | 定义列宽和列数 | grid-template-columns: 100px 1fr 2fr; |
| grid-template-rows | 定义行高和行数 | grid-template-rows: 200px auto; |
| grid-gap (grid-row-gap, grid-column-gap) | 行间距和列间距 | grid-gap: 10px 20px; |
| justify-items | 控制单元格内子项的水平对齐 | justify-items: center; |
| align-items | 控制单元格内子项的垂直对齐 | align-items: start; |
项目属性
| 属性 | 作用 | 示例 |
|---|---|---|
| grid-column-start/end | 设置项目横向的起始和结束线 | grid-column-start: 2; |
| grid-row-start/end | 设置项目纵向的起始和结束线 | grid-row-end: span 2; |
| grid-area | 指定项目跨越多个单元格或区域 | grid-area: 1 / 2 / 3 / 4; |
| justify-self | 控制项目自身在单元格内的水平对齐 | justify-self: end; |
| align-self | 控制项目自身在单元格内的垂直对齐 | align-self: center; |
🧩 用 Grid 实现常见布局
1. 简单三栏布局
<div class="container">
<div class="item">左栏</div>
<div class="item">中间内容</div>
<div class="item">右栏</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
height: 200px;
}
.item {
background-color: #a0c4ff;
padding: 10px;
border: 1px solid #333;
text-align: center;
}
</style>
2. 头部-内容-底部布局
<div class="container">
<header class="header">头部</header>
<main class="main">主体内容</main>
<footer class="footer">底部</footer>
</div>
<style>
.container {
display: grid;
grid-template-rows: 60px 1fr 40px;
height: 300px;
grid-gap: 5px;
}
.header,
.main,
.footer {
background-color: #ffadad;
padding: 10px;
border: 1px solid #333;
text-align: center;
}
</style>
3. 九宫格布局
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
width: 320px;
}
.item {
background-color: #ffd6a5;
border: 1px solid #333;
text-align: center;
line-height: 100px;
font-size: 24px;
}
</style>
🔍 Grid vs Flex 对比表格
| 维度 | CSS Grid | Flexbox |
|---|---|---|
| 维度 | 二维布局（行 + 列） | 一维布局（行或列） |
| 布局控制 | 精确控制行高列宽及单元格位置 | 适合内容流式排布 |
| 子项跨行跨列 | 支持 | 不支持 |
| 适合场景 | 复杂网格、页面整体布局 | 简单线性、一维内容列表 |
| 学习难度 | 相对较复杂 | 容易上手 |
🛠️ 常用 Grid 属性汇总
| 属性 | 作用 | 备注 |
|---|---|---|
| display: grid | 声明网格容器 | 必须 |
| grid-template-columns | 设置列数和列宽 | 支持 px、fr、%、auto 等单位 |
| grid-template-rows | 设置行数和行高 | 同上 |
| grid-gap | 设置行列间距 | grid-row-gap + grid-column-gap 的简写 |
| grid-column-start/end | 子元素横向起始和结束线 | 支持数字、span 关键字 |
| grid-row-start/end | 子元素纵向起始和结束线 | 支持数字、span 关键字 |
| grid-area | 定义子元素跨越区域 | grid-area: row-start / col-start / row-end / col-end |
| justify-items | 容器内项目水平对齐 | start, center, end, stretch |
| align-items | 容器内项目垂直对齐 | start, center, end, stretch |
| justify-self | 单个项目水平对齐 | 同上 |
| align-self | 单个项目垂直对齐 | 同上 |
🧾 小节总结
- CSS Grid 是一个强大的二维布局系统，能同时控制行和列，适合复杂布局需求。
- Grid 主要通过定义网格容器、行列轨道、以及具体子元素的位置来实现灵活排版。
- Grid 和 Flexbox 各有优势，Grid 更适合整体页面布局，Flexbox 更适合内容的一维排布。
- 通过
grid-template-columns和grid-template-rows设定网格轨道，利用子元素的起止线属性灵活控制元素大小和位置。 - Grid 支持响应式设计，可以结合媒体查询和
fr单位，实现自适应布局。
❓ 知识问答（Q&A）
Q：Grid 布局和 Flexbox 有什么本质区别？
A：Grid 布局是二维的，既可以控制行也可以控制列；Flexbox 是一维的，只能控制一行或一列的排列，适合不同场景。
Q：fr 单位是什么？
A：fr 表示网格容器剩余空间的分数单位，1fr 是剩余空间的一个份额，支持通过 fr 简单分配空间。
Q：Grid 中如何实现元素跨多行多列？
A：通过设置子元素的 grid-column-start/end 和 grid-row-start/end，或者简写的 grid-area 属性实现。
🧪 小练习
练习 1：创建一个 4 列的响应式网格
请用 Grid 创建一个包含 4 列的网格布局，列宽相等，间距 15px，高度固定为 150px。
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
height: 150px;
}
.grid-item {
background-color: #9bf6ff;
border: 1px solid #333;
text-align: center;
line-height: 150px;
font-weight: bold;
}
</style>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：制作一个卡片布局，卡片跨两列显示
请利用 Grid 实现一个卡片列表，其中第一个卡片占据两列宽度，其余卡片每个占一列。
<div class="card-container">
<div class="card card-large">大卡片</div>
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
</div>
<style>
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 12px;
}
.card {
background-color: #b5ead7;
border: 1px solid #333;
padding: 20px;
text-align: center;
font-size: 18px;
}
.card-large {
grid-column: span 2;
background-color: #ffcbf2;
}
</style>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握了 CSS Grid 布局的基本原理、核心属性、常见布局实现技巧以及如何结合 Flexbox 进行合理选择。多练习、多实践，Grid 会成为你强力的页面布局工具！