CSS 网格布局（详细教程）

什么是 CSS 网格布局？

在网页设计的世界里，布局是决定页面结构的核心。过去，我们主要依靠浮动（float）、定位（position）和弹性盒子（Flexbox）来实现复杂的页面排布。然而，这些方法在处理二维布局时显得力不从心——比如同时控制行和列的对齐、间距和响应式调整。

这时候，CSS 网格布局（CSS Grid Layout）应运而生，它就像是网页设计的“蓝图工具”，让你能精准地在二维平面上定义区域、划分轨道、控制对齐，真正实现“所见即所得”的布局体验。

CSS 网格布局的核心优势在于它能同时管理行和列，不像 Flexbox 只擅长一维排列。想象一下你正在设计一个杂志页面：封面图、标题、正文、侧边栏、广告位……这些元素需要在多个方向上协调排布。用 CSS 网格布局，你只需要定义一个“网格容器”，然后把每个内容块“放入”指定的网格单元中，无需复杂的嵌套和额外的 HTML 结构。

现代浏览器对 CSS 网格布局的支持已经非常成熟，Chrome、Firefox、Safari 和 Edge 均已全面支持。这意味着，无论你是开发响应式网站、管理后台面板，还是构建复杂的前端应用界面，CSS 网格布局都已成为不可或缺的技能。

网格容器与网格项目的基本概念

在开始编码前，先理解两个核心概念：网格容器（Grid Container）和网格项目（Grid Item）。

• 网格容器：你将使用 display: grid 的那个父元素，它是整个网格结构的“舞台”。
• 网格项目：它是网格容器内部的子元素，也就是被放置在网格中的各个内容块，比如一个卡片、一个标题、一个侧边栏。

让我们通过一个简单的例子来演示：

.grid-container {
  display: grid;
  /* 定义网格的列数和行数 */
  grid-template-columns: 1fr 1fr;  /* 两列，每列占等宽空间 */
  grid-template-rows: 100px 150px;  /* 两行，第一行高 100px，第二行高 150px */
  gap: 10px;  /* 设置网格项之间的间距为 10px */
}

<div class="grid-container">
  <div class="item">标题</div>
  <div class="item">正文</div>
  <div class="item">侧边栏</div>
  <div class="item">广告位</div>
</div>

在这个例子中：

• .grid-container 是网格容器。
• 四个 .item 是网格项目。
• grid-template-columns: 1fr 1fr 表示将容器分成两列，每列占据相等的可用空间（fr 是“fraction”的缩写，代表“分数”）。
• grid-template-rows 定义了两行的高度。
• gap: 10px 设置了所有相邻网格项目之间的间距，非常实用，无需额外的 margin。

💡 小贴士：1fr 的意思是“1 份可用空间”。如果你写 1fr 2fr，那么第二列的宽度将是第一列的两倍。

使用 grid-template-columns 和 grid-template-rows 定义网格结构

网格布局的强大之处在于你能够精确控制每一行和每一列的尺寸。grid-template-columns 和 grid-template-rows 是定义网格结构的两大支柱。

常见的尺寸单位

示例：使用 minmax 实现响应式布局

.grid-container {
  display: grid;
  /* 使用 minmax 确保每列最小 200px，最大占满空间 */
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  /* 三列，每列最小 200px，最大为 1fr */
  gap: 15px;
}

repeat(3, minmax(200px, 1fr)) 的含义是：重复三次，每次创建一个列，其宽度在 200px 到 1fr 之间自动调整。当屏幕变窄时，列会压缩到最小 200px；当屏幕变宽时，列会拉伸以填满空间。

这个技巧特别适合创建响应式卡片布局，比如产品展示页、文章列表等。

网格项目的位置控制：grid-column 和 grid-row

现在我们已经定义了网格的结构，接下来如何让某个项目“落在”特定的网格单元中？这就需要用到 grid-column 和 grid-row。

这两个属性允许你指定项目在网格中的起始和结束位置。

语法说明

• grid-column: 起始 / 结束：控制列方向的位置
• grid-row: 起始 / 结束：控制行方向的位置

示例：让一个项目跨越多列或多行

.item-large {
  /* 从第 1 列开始，占据到第 3 列结束（即跨 2 列） */
  grid-column: 1 / 3;
  
  /* 从第 1 行开始，占据到第 2 行结束（即占 1 行） */
  grid-row: 1 / 2;
}

如果项目想占两行，可以写成：

.item-span-two-rows {
  grid-column: 1 / 2;
  grid-row: 1 / 3;  /* 从第 1 行开始，到第 3 行结束，占据 2 行 */
}

✅ 提示：/ 左边是起始线，右边是结束线。注意，网格线是从 1 开始编号的，而不是 0。

我们来用一个实际案例看看效果：

<div class="grid-container">
  <div class="header">网站标题</div>
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主内容</div>
  <div class="footer">页脚</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  gap: 10px;
}

.header {
  grid-column: 1 / 3;  /* 占据两列，跨整个顶部 */
  grid-row: 1 / 2;
  background-color: #007acc;
  color: white;
  text-align: center;
  line-height: 60px;
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: #f0f0f0;
}

.main-content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: #ffffff;
}

.footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background-color: #333;
  color: white;
  text-align: center;
  line-height: 50px;
}

这个布局模拟了一个标准的网页结构：顶部标题横跨全宽，左侧侧边栏和右侧主内容并列，底部页脚也横跨全宽。

网格线命名与隐式网格：进阶技巧

CSS 网格布局不仅支持自动分配，还允许你为网格线命名，从而让布局更清晰、可维护性更强。

使用命名网格线

.grid-container {
  display: grid;
  grid-template-columns: [header-start] 1fr [header-end] 2fr [main-end];
  grid-template-rows: [top] 60px [content-start] 1fr [bottom];
  gap: 10px;
}

.header {
  grid-column: header-start / header-end;
  grid-row: top / content-start;
}

.main-content {
  grid-column: header-end / main-end;
  grid-row: content-start / bottom;
}

通过 [header-start]、[header-end] 这样的命名，你可以更直观地理解布局结构，尤其在复杂项目中，大大提升可读性。

隐式网格（Implicit Grid）

当你在网格容器中放置的项目超出 grid-template-columns 和 grid-template-rows 定义的范围时，浏览器会自动创建额外的行或列，这个就是“隐式网格”。

默认情况下，隐式网格的轨道大小为 auto，意味着它会根据内容自动调整。

如果想控制隐式轨道的大小，可以使用：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-auto-rows: 80px;    /* 隐式行的高度为 80px */
  grid-auto-columns: 100px; /* 隐式列的宽度为 100px */
}

这样，即使你添加了超出原始定义的网格项目，它们也会以统一的尺寸自动排布。

常见应用场景与最佳实践

1. 响应式卡片布局

使用 minmax() 和 repeat() 能轻松实现响应式卡片：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

auto-fit 会自动调整列数，使每列最小 250px，最大占满空间。屏幕越宽，列越多；屏幕越窄，列越少，非常适合移动端适配。

2. 复杂仪表盘布局

对于后台管理系统的仪表盘，你可以用命名网格线精确控制每个模块的位置：

.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar chart chart"
    "sidebar table table";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr;
  gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.chart { grid-area: chart; }
.table { grid-area: table; }

grid-template-areas 是一种更直观的布局方式，用区域名代替复杂的 grid-column 和 grid-row，代码更易读。

总结

CSS 网格布局是现代前端开发的基石之一。它让二维布局变得直观、灵活且高效。从简单的两列布局，到复杂的响应式仪表盘，CSS 网格布局都能轻松应对。

掌握 display: grid、grid-template-columns/rows、grid-column/row、gap、minmax()、repeat() 和 grid-area 等核心属性，你就能构建出专业级的网页结构。

无论你是初学者还是中级开发者，只要愿意花点时间练习，很快就能上手。别再用浮动和 float: left 来拼凑布局了，CSS 网格布局才是未来。