跳到主要内容

CSS Grid 布局完全指南

CSS Grid Layout 是一个强大的二维布局系统，可以同时处理行和列，非常适合创建复杂的网页布局。

一、基本概念​

1.1 什么是 Grid 布局？​

Grid 布局将页面划分为一个个网格，通过组合不同的网格来实现各种布局效果。

核心术语：

  • 容器（Container）：设置了 display: grid 的元素
  • 项目（Item）：容器的直接子元素
  • 网格线（Grid Line）：划分网格的线，从 1 开始编号
  • 网格轨道（Grid Track）：两条相邻网格线之间的空间（行或列）
  • 网格单元格（Grid Cell）：四条网格线围成的最小单位
  • 网格区域（Grid Area）：由多个单元格组成的矩形区域
     1    2    3    4   ← 列网格线
   ┌────┬────┬────┐
 1 │ A  │ B  │ C  │
   ├────┼────┼────┤
 2 │ D  │ E  │ F  │
   ├────┼────┼────┤
 3 │ G  │ H  │ I  │
   └────┴────┴────┘
 ↑ 行网格线

1.2 创建 Grid 容器​

CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
效果预览
1
2
3

二、容器属性（Container Properties）​

2.1 grid-template-columns / grid-template-rows​

定义网格的列宽和行高。

属性值：

值说明示例
<length>固定长度100px, 5em
<percentage>百分比25%, 50%
fr弹性比例单位1fr, 2fr
auto自动填充auto
min-content内容最小宽度min-content
max-content内容最大宽度max-content
minmax(min, max)最小到最大范围minmax(100px, 1fr)

示例：三列固定宽度

CSS
.container {
display: grid;
grid-template-columns: 100px 150px 100px;
}
效果预览
1
2
3

示例：使用 fr 单位 - 第二列是其他列的两倍宽

CSS
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
效果预览
1
2
3

示例：混合使用 - 两侧固定，中间自适应

CSS
.container {
display: grid;
grid-template-columns: 80px 1fr 80px;
grid-template-rows: 40px 60px;
}
效果预览
1
2
3
4
5
6

2.2 repeat() 函数​

简化重复值的书写。

语法：

repeat(次数, 轨道大小)

示例：创建4列等宽网格

CSS
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 等价于: 1fr 1fr 1fr 1fr */
}
效果预览
1
2
3
4
5
6
7
8

示例：重复模式

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 80px 40px);
/* 结果: 80px 40px 80px 40px 80px 40px */
}
效果预览
1
2
3
4
5
6

auto-fill vs auto-fit：

auto-fill 会保留空轨道，auto-fit 会折叠空轨道让项目拉伸填满。

CSS
/* auto-fit: 项目会拉伸填满容器 */
.container {
display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(80px, 1fr));
}
效果预览
1
2
3

2.3 grid-template-areas​

通过命名区域来定义布局，非常直观。

CSS
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
  "header header header"
  "nav    main   aside"
  "footer footer footer";
}
效果预览
Header
Nav
Main
Aside
Footer

特殊值：

  • . 表示空单元格
  • 相同名称的相邻单元格会合并为一个区域

2.4 gap / row-gap / column-gap​

设置网格间距（原名 grid-gap，已简化）。

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
/* 或分开设置: */
/* row-gap: 20px; */
/* column-gap: 10px; */
}
效果预览
1
2
3
4
5
6

不同行列间距：

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 8px;
}
效果预览
1
2
3
4
5
6

2.5 justify-items / align-items / place-items​

控制所有项目在单元格内的对齐方式。

属性值：

值说明
start对齐到起始位置
end对齐到结束位置
center居中对齐
stretch拉伸填满（默认值）

示例：justify-items: start（水平靠左）

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start;
}
效果预览
1
2
3

示例：place-items: center（水平垂直居中）

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
效果预览
1
2
3

2.6 justify-content / align-content / place-content​

当网格总大小小于容器时，控制整个网格在容器内的对齐方式。

属性值：

值说明
start对齐到起始位置
end对齐到结束位置
center居中
stretch拉伸
space-between两端对齐，中间均分
space-around每个项目两侧间距相等
space-evenly所有间距完全相等

示例：justify-content: space-between

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 60px);
justify-content: space-between;
}
效果预览
1
2
3

示例：place-content: center（整个网格居中）

CSS
.container {
display: grid;
grid-template-columns: repeat(2, 60px);
grid-template-rows: repeat(2, 40px);
place-content: center;
}
效果预览
1
2
3
4

2.7 grid-auto-rows / grid-auto-columns​

定义隐式网格轨道的大小（当项目超出显式网格时自动创建）。

CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px;  /* 只定义1行 */
grid-auto-rows: 30px;      /* 超出的行高30px */
}
效果预览
1
2
3
4
5
6
7
8
9

2.8 grid-auto-flow​

控制自动放置项目的方式。

属性值：

值说明
row按行依次填充（默认）
column按列依次填充
dense紧密填充，尽量不留空隙

示例：grid-auto-flow: column

CSS
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
grid-auto-columns: 60px;
}
效果预览
1
2
3
4
5
6

三、项目属性（Item Properties）​

3.1 grid-column / grid-row​

指定项目占据的网格线范围。

语法：

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

示例：项目跨越多列

CSS
.item-1 {
grid-column: 1 / 3;  /* 跨越第1-2列 */
}
.item-2 {
grid-column: 3 / 4;
}
效果预览
1
2
3
4
5

示例：使用 span 关键字

CSS
.item-1 {
grid-column: span 2;  /* 跨越2列 */
grid-row: span 2;     /* 跨越2行 */
}
效果预览
1
2
3
4
5

示例：占满整行

CSS
.item-1 {
grid-column: 1 / -1;  /* 从第1条线到最后 */
}
效果预览
1
2
3
4
5

3.2 grid-area​

可以指定命名区域，或作为位置简写。

位置简写语法：

grid-area: row-start / column-start / row-end / column-end;
CSS
.item-1 {
grid-area: 1 / 1 / 3 / 3;
/* 占据左上角 2x2 区域 */
}
效果预览
1
2
3
4
5

3.3 justify-self / align-self / place-self​

控制单个项目在单元格内的对齐方式。

CSS
.item-1 { justify-self: start; }
.item-2 { justify-self: center; }
.item-3 { justify-self: end; }
.item-4 { place-self: center; }
效果预览
1
2
3
4

3.4 order​

控制项目的排列顺序，数值越小越靠前，默认为 0。

CSS
.item-1 { order: 3; }  /* 显示在最后 */
.item-2 { order: 1; }  /* 显示在最前 */
.item-3 { order: 2; }  /* 显示在中间 */
效果预览
A (order:3)
B (order:1)
C (order:2)

四、实用函数​

4.1 minmax()​

定义一个大小范围，常用于响应式布局。

CSS
.container {
display: grid;
grid-template-columns:
  minmax(100px, 1fr) 2fr minmax(100px, 1fr);
}
效果预览
1
2
3

4.2 fit-content()​

根据内容自适应，但不超过指定值。

CSS
.container {
display: grid;
grid-template-columns:
  fit-content(100px) 1fr 1fr;
}
效果预览
短
中间列
右边列

五、命名网格线​

可以给网格线命名，使代码更具可读性。

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end main-start] 1fr
    [main-end];
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
}

.main {
  grid-column: main-start / main-end;
}

六、实战示例​

6.1 经典圣杯布局​

CSS
.holy-grail {
display: grid;
grid-template-columns: 120px 1fr 120px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
  "header header header"
  "nav    main   aside"
  "footer footer footer";
min-height: 100vh;
}
效果预览
Header
Nav
Main
Aside
Footer

6.2 响应式卡片网格​

CSS
.card-grid {
display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
}
效果预览
Card 1
Card 2
Card 3
Card 4

6.3 图片画廊（不规则布局）​

CSS
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 60px;
}
.large {
grid-column: span 2;
grid-row: span 2;
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
效果预览
Large
A
B
Wide
C
D

6.4 12列栅格系统​

CSS
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
效果预览
col-4
col-8
col-6
col-6

6.5 居中布局​

CSS
/* 最简单的居中方式 */
.center {
display: grid;
place-items: center;
height: 100vh;
}
效果预览
居中内容

七、属性速查表​

容器属性​

属性说明
display: grid创建 Grid 容器
grid-template-columns定义列轨道
grid-template-rows定义行轨道
grid-template-areas定义命名区域
grid-template上述三者的简写
gap / row-gap / column-gap网格间距
justify-items项目水平对齐
align-items项目垂直对齐
place-items上述两者的简写
justify-content网格水平对齐
align-content网格垂直对齐
place-content上述两者的简写
grid-auto-columns隐式列轨道大小
grid-auto-rows隐式行轨道大小
grid-auto-flow自动放置方式

项目属性​

属性说明
grid-column-start列起始线
grid-column-end列结束线
grid-row-start行起始线
grid-row-end行结束线
grid-column列位置简写
grid-row行位置简写
grid-area区域/位置简写
justify-self单项目水平对齐
align-self单项目垂直对齐
place-self上述两者的简写
order排列顺序

八、浏览器兼容性​

CSS Grid 在现代浏览器中已获得广泛支持：

  • Chrome 57+
  • Firefox 52+
  • Safari 10.1+
  • Edge 16+

对于旧版浏览器，可以使用 @supports 进行特性检测：

.container {
  display: flex; /* 回退方案 */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

九、Grid vs Flexbox​

特性GridFlexbox
维度二维（行+列）一维（行或列）
适用场景整体页面布局组件内部布局
对齐控制更精细较简单
学习曲线较陡较平缓

最佳实践： Grid 用于页面整体布局，Flexbox 用于组件内部排列，两者可以结合使用。