CSS Grid网格布局是CSS中专门用于二维布局的模块，能够同时控制行和列的分布，比传统的布局方式更适合处理复杂的页面结构。它的核心是网格容器和网格项目两个概念，只要掌握相关属性的用法，就能快速创建出符合需求的布局。
一、创建网格容器
要使用网格布局，首先需要把一个元素定义为网格容器，通过给元素设置display: grid或者display: inline-grid即可实现。其中display: grid会让容器成为块级网格元素，display: inline-grid会让容器成为行内网格元素。
/* 定义块级网格容器 */
.container {
display: grid;
}
/* 定义行内网格容器 */
.inline-container {
display: inline-grid;
}
二、设置网格行列结构
定义好网格容器后，需要通过grid-template-columns和grid-template-rows属性来设置网格的列和行的尺寸，这两个属性的值是一系列的长度单位，每个值对应一列或者一行的宽度或高度。
1. 固定尺寸设置
可以直接使用px、em等固定单位来定义行列的尺寸，比如下面的代码会创建一个3列2行的网格，每列宽度100px，每行高度80px。
.container {
display: grid;
/* 3列，每列100px */
grid-template-columns: 100px 100px 100px;
/* 2行，每行80px */
grid-template-rows: 80px 80px;
}
2. 使用fr单位分配剩余空间
fr是网格布局特有的单位，代表剩余可用空间的比例，比如1fr 2fr表示第一列占1份剩余空间，第二列占2份剩余空间，总份数是3份。
.container {
display: grid;
/* 3列，第一列占1份，第二列占2份，第三列占1份 */
grid-template-columns: 1fr 2fr 1fr;
/* 2行，每行占剩余空间的1份 */
grid-template-rows: 1fr 1fr;
/* 容器高度需要设置，否则fr单位无法计算剩余空间 */
height: 300px;
}
3. 重复设置简化写法
如果多列或者多行的尺寸相同，可以使用repeat()函数简化代码，第一个参数是重复次数，第二个参数是重复的尺寸值。
.container {
display: grid;
/* 等同于 100px 100px 100px 100px */
grid-template-columns: repeat(4, 100px);
/* 等同于 1fr 1fr 1fr */
grid-template-rows: repeat(3, 1fr);
height: 400px;
}
三、网格间隙设置
可以通过gap属性设置网格行和列之间的间隙，它是row-gap和column-gap的简写属性，第一个值表示行间隙，第二个值表示列间隙，如果只写一个值则行和列的间隙相同。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* 行间隙20px，列间隙15px */
gap: 20px 15px;
height: 300px;
}
四、网格项目的位置调整
默认情况下网格项目会按照顺序排列到网格单元格中，也可以通过grid-column和grid-row属性调整项目的位置和跨度，这两个属性是grid-column-start、grid-column-end和grid-row-start、grid-row-end的简写。
/* 容器样式 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 400px;
gap: 10px;
}
/* 第一个项目跨2列1行 */
.item1 {
grid-column: 1 / 3; /* 从第1列线到第3列线，跨2列 */
grid-row: 1 / 2; /* 从第1行线到第2行线，跨1行 */
background-color: #f0f0f0;
}
/* 第二个项目跨1列2行 */
.item2 {
grid-column: 3 / 4;
grid-row: 1 / 3;
background-color: #e0e0e0;
}
五、完整示例
下面是一个完整的网格布局示例，创建一个包含头部、侧边栏、主内容区、底部的常见页面结构。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS Grid布局示例</title>
<style>
.page {
display: grid;
/* 定义3列：侧边栏200px，主内容占剩余1份，右侧留白100px */
grid-template-columns: 200px 1fr 100px;
/* 定义3行：头部60px，内容占剩余1份，底部40px */
grid-template-rows: 60px 1fr 40px;
/* 行间隙10px，列间隙15px */
gap: 10px 15px;
height: 100vh;
margin: 0;
}
.header {
/* 跨3列 */
grid-column: 1 / 4;
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
.sidebar {
background-color: #f5f5f5;
padding: 20px;
}
.main {
background-color: #ffffff;
padding: 20px;
}
.extra {
background-color: #f5f5f5;
padding: 20px;
}
.footer {
/* 跨3列 */
grid-column: 1 / 4;
background-color: #333333;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="page">
<div class="header">页面头部</div>
<div class="sidebar">侧边栏</div>
<div class="main">主内容区</div>
<div class="extra">右侧区域</div>
<div class="footer">页面底部</div>
</div>
</body>
</html>
六、注意事项
- 网格容器的直接子元素才会成为网格项目，孙子元素不会受网格布局影响。
- 使用
fr单位时，网格容器需要有明确的尺寸，否则无法计算剩余空间。 - 网格线从1开始计数，
grid-column: 1 / 3表示从第1条列线到第3条列线，跨2列。 - 如果项目设置的跨度超过了定义的网格范围，网格会自动创建隐式网格来容纳项目。
CSS_Grid网格布局grid_template_columnsgrid_template_rowsfr单位修改时间：2026-07-01 15:06:42