本教程共 44 篇 · 第 33 篇 · 更新于 2026-07-29 · 约 14 分钟阅读

33. Grid 基础

本节目标：理解 CSS Grid 的核心概念，掌握如何定义网格容器、设置行列尺寸、控制间距，能够搭建基础的网格布局。

如果说 Flexbox 是一维布局（只管一行或一列），那 Grid 就是二维布局。它同时控制行和列，适合做整体页面架构。

创建网格容器

和 Flexbox 类似，给父元素设置 display: grid，它就成了网格容器，所有直接子元素自动变成网格项目。

.container {
  display: grid;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      gap: 8px;
    }
    .item {
      padding: 20px;
      background: #3498DB;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

Note

也能创建网格容器，但容器表现为行内元素，宽度由内容决定。

grid-template-columns：定义列

grid-template-columns 定义网格有几列、每列多宽。值之间用空格分隔。

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 200px 100px;
      gap: 8px;
    }
    .item {
      padding: 20px;
      background: #2ECC71;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">100px</div>
    <div class="item">200px</div>
    <div class="item">100px</div>
    <div class="item">100px</div>
    <div class="item">200px</div>
    <div class="item">100px</div>
  </div>
</body>
</html>

常用单位：

单位	含义
`px`	固定像素
`%`	相对容器宽度的百分比
`auto`	自动，取内容宽度或剩余空间
`fr`	份数，按比例分配剩余空间

/* 三列等宽，各占一份 */
grid-template-columns: 1fr 1fr 1fr;

/* 左列固定 200px，右列占满剩余空间 */
grid-template-columns: 200px 1fr;

/* 四列，中间两列是两侧的两倍 */
grid-template-columns: 1fr 2fr 2fr 1fr;

Tip

单位是 Grid 独有的，比百分比更灵活。它只分配”剩余空间”，不会把固定尺寸的部分算进去。

grid-template-rows：定义行

grid-template-rows 定义每行的高度。用法和列类似。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 200px;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 60px 120px;
      gap: 8px;
    }
    .item {
      padding: 16px;
      background: #E67E22;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">行1</div>
    <div class="item">行1</div>
    <div class="item">行1</div>
    <div class="item">行2</div>
    <div class="item">行2</div>
    <div class="item">行2</div>
  </div>
</body>
</html>

只定义了两行，但项目有 6 个。超出的项目会自动创建”隐式行”，高度由内容撑开。

repeat()：简化重复定义

当有多列宽度相同时，用 repeat() 可以少写很多。

/* 等同于 1fr 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(5, 1fr);

/* 等同于 100px 200px 100px 200px */
grid-template-columns: repeat(2, 100px 200px);

gap：网格间距

gap 设置行与列之间的间距。它是 row-gap 和 column-gap 的简写。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* 行列间距都是 16px */
}

/* 或者分开设置 */
.container {
  row-gap: 20px;
  column-gap: 10px;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .item {
      padding: 24px;
      background: #9B59B6;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
</body>
</html>

Tip

只产生网格内部间距，不会在容器边缘外加间距。如果需要外边距，给容器加 padding。

网格线：定位的参考系

Grid 布局由网格线划分。3 列的网格有 4 条列线（编号 1 到 4），2 行的网格有 3 条行线。

  1     2     3     4   ← 列线
1 ┌─────┬─────┬─────┐
  │  A  │  B  │  C  │
2 ├─────┼─────┼─────┤
  │  D  │  E  │  F  │
3 └─────┴─────┴─────┘
↑
行线

网格线是后面”项目定位”的基础。

容器对齐：justify-content 与 align-content

当网格总尺寸小于容器时，可以用这两个属性对齐整个网格。

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center; /* 水平居中整个网格 */
  align-content: center;   /* 垂直居中整个网格 */
  height: 300px;
}

取值与 Flexbox 类似：start、end、center、space-between、space-around、space-evenly。

这两个属性对齐的是”网格整体”，不是网格内的单个项目。要对齐单个项目，用

和 align-items。

Grid 与 Flexbox 怎么选

场景	推荐
单行或单列排列（导航栏、按钮组）	Flexbox
二维布局（页面整体架构、卡片网格）	Grid
内容尺寸驱动布局	Flexbox
精确控制行列位置	Grid
未知数量的元素自动排列	两者都可，Grid 更简洁

实际项目中经常混用：用 Grid 搭整体框架，Flexbox 处理组件内部排列。

Grid 基础速查

属性	作用
`display: grid`	创建网格容器
`grid-template-columns`	定义列数和列宽
`grid-template-rows`	定义行数和行高
`gap`	网格间距
`justify-content`	水平对齐整个网格
`align-content`	垂直对齐整个网格
`repeat(n, size)`	重复定义
`fr`	份数单位，分配剩余空间