首页 / CSS 入门教程 / Grid 高级

← 上一篇 下一篇 →
CSS 入门教程

Grid 高级

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

Grid网格布局grid-areaauto-fillminmax对齐

34. Grid 高级

本节目标：掌握 Grid 的网格线定位、命名区域、自动填充和对齐控制，能够搭建复杂的二维布局。

上一章学了 Grid 的基础行列定义。本章进入更强大的功能：让项目跨越多行多列、用命名区域描述布局结构、自动适应容器宽度。

网格线定位：让项目跨越行列

每个网格项目默认占一个格子。通过网格线编号，可以让项目跨越多个行列。

.item {
  grid-column-start: 1;  /* 从第 1 条列线开始 */
  grid-column-end: 3;    /* 到第 3 条列线结束（占 2 列） */
  grid-row-start: 1;     /* 从第 1 条行线开始 */
  grid-row-end: 3;       /* 到第 3 条行线结束（占 2 行） */
}
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 80px);
      gap: 8px;
    }
    .item {
      padding: 16px;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
    .header { grid-column: 1 / 4; background: #2C3E50; }
    .sidebar { grid-row: 2 / 4; background: #3498DB; }
    .main { grid-column: 2 / 4; grid-row: 2 / 3; background: #2ECC71; }
    .footer { grid-column: 2 / 4; background: #E67E22; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item header">Header (1/4)</div>
    <div class="item sidebar">Sidebar</div>
    <div class="item main">Main</div>
    <div class="item footer">Footer</div>
  </div>
</body>
</html>
Note

是 grid-column-start 和 grid-column-end 的简写。注意是”线编号”不是”列编号”，1 到 4 表示占 3 列。

还可以用 span 关键字表示”跨越多少格”：

/* 从第 1 条线开始，跨 2 列 */
grid-column: 1 / span 2;

/* 跨到最后一条线 */
grid-column: 1 / -1;

grid-area：命名区域定位

grid-area 可以给项目命名，然后在容器上用 grid-template-areas 描述布局结构。这是最直观的 Grid 布局方式。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 8px;
  height: 300px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      grid-template-rows: 50px 1fr 40px;
      grid-template-areas:
        "header  header  header"
        "sidebar main    main"
        "footer  footer  footer";
      gap: 8px;
      height: 280px;
    }
    .header  { grid-area: header;  background: #2C3E50; }
    .sidebar { grid-area: sidebar; background: #3498DB; }
    .main    { grid-area: main;    background: #2ECC71; }
    .footer  { grid-area: footer;  background: #E67E22; }
    .item { padding: 12px; color: white; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item header">Header</div>
    <div class="item sidebar">Sidebar</div>
    <div class="item main">Main Content</div>
    <div class="item footer">Footer</div>
  </div>
</body>
</html>
Tip

的字符串视觉上就是布局图。修改布局只需要改字符串，不用动项目的 CSS。

用一列 . 表示空单元格：

grid-template-areas:
  "header  header  header"
  ".       main    main"
  "footer  footer  footer";

auto-fill 与 auto-fit：自动填充列数

这两个关键字让网格根据容器宽度自动计算能放多少列，是响应式布局的利器。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
  • auto-fill：能放多少列就放多少列，即使有些列是空的。
  • auto-fit：能放多少列就放多少列，但会把空列折叠，让已有列撑满。
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 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">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>
Tip

是经典的响应式卡片栅格写法。不需要媒体查询，列数自动随容器宽度变化。

minmax()：设置尺寸范围

minmax(min, max) 定义一个尺寸范围，最小不低于 min，最大不超过 max。

grid-template-columns: 200px minmax(100px, 1fr) 200px;

常与 auto-fill 配合使用：

/* 每列最小 150px，最大 1fr，自动填充 */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

项目对齐：justify-items 与 align-items

这两个属性控制所有网格项目在各自格子内的对齐方式。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  justify-items: start;   /* 水平对齐：靠左 */
  align-items: center;    /* 垂直对齐：居中 */
}

取值：start、end、center、stretch（默认）。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      justify-items: center;
      align-items: center;
      gap: 8px;
    }
    .item {
      padding: 12px 20px;
      background: #1ABC9C;
      color: white;
      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

控制水平方向，align-items 控制垂直方向。注意与 Flexbox 的命名规则一致。

单个项目对齐：justify-self 与 align-self

如果想让某个项目单独对齐，用 justify-self 或 align-self。

.special {
  justify-self: end;   /* 这个项目靠右 */
  align-self: start;   /* 这个项目靠上 */
}
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      gap: 8px;
    }
    .item {
      padding: 12px 20px;
      background: #34495E;
      color: white;
      border-radius: 4px;
    }
    .special {
      justify-self: center;
      align-self: center;
      background: #E74C3C;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">默认</div>
    <div class="item">默认</div>
    <div class="item">默认</div>
    <div class="item">默认</div>
    <div class="item special">特殊</div>
    <div class="item">默认</div>
  </div>
</body>
</html>

Grid 对齐属性速查

属性作用对象方向
justify-content整个网格水平
align-content整个网格垂直
justify-items所有项目水平
align-items所有项目垂直
justify-self单个项目水平
align-self单个项目垂直

记忆口诀：justify 管水平，align 管垂直；content 管整体，items 管所有，self 管单个。

实战：经典页面布局

综合运用命名区域和自动填充，可以快速搭建响应式页面：

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100vh;
  gap: 0;
}

/* 响应式：窄屏时单列 */
@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

Grid 的强大之处在于：用 grid-template-areas 描述布局结构，用媒体查询改字符串，整个页面结构就变了。项目自身的 CSS 完全不用动。

上一篇
Grid 基础
下一篇
多列布局