CSS 网格布局（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 CSS 网格布局？

在网页开发的长河中，布局技术如同航海中的指南针，指引着开发者构建出优雅且灵活的界面。从早期的 float 布局到 Flexbox 的出现，再到如今的 CSS 网格布局（CSS Grid Layout），每一次技术的迭代都在解决一个核心问题：如何让开发者以更高效、直观的方式控制页面元素的空间分布。

CSS 网格布局被誉为现代网页布局的“瑞士军刀”，它通过二维网格系统，允许开发者同时控制行和列的布局，甚至能够实现复杂的交集区域设计。对于编程初学者和中级开发者而言，掌握这一技术不仅能提升代码的可维护性，还能大幅缩短实现复杂 UI 的时间成本。

本文将从基础概念出发，逐步深入讲解 CSS 网格布局的核心语法、常用属性，并通过实际案例展示其应用技巧。无论是两栏布局、响应式设计，还是复杂的棋盘格、瀑布流效果，你都将找到对应的解决方案。

一、基础概念：网格的“乐高积木”思维

1.1 网格的基本组成

CSS 网格布局由两个核心元素构成：

• 容器（Grid Container）：通过 display: grid 或 display: inline-grid 声明的父元素。
• 项目（Grid Item）：容器内的直接子元素，即网格中的各个“积木块”。

想象一个棋盘，容器是棋盘本身，而项目是棋盘上的棋子。通过定义棋盘的行和列（即网格线），开发者可以精确控制每个棋子的位置和大小。

1.2 网格线与网格轨道

网格由两条方向的线构成：

• 列线（Column Lines）：垂直方向的线，决定列的边界。
• 行线（Row Lines）：水平方向的线，决定行的边界。

网格轨道（Grid Track） 是两条相邻网格线之间的空间，可以是列轨道（column track）或行轨道（row track）。例如：

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 定义三列 */
  grid-template-rows: 150px auto; /* 定义两行 */
}

此代码声明了一个容器，包含三列（宽度分别为 100px、200px、100px）和两行（高度分别为 150px 和自动扩展）。

二、核心属性详解：构建网格的“工具箱”

2.1 定义网格结构：grid-template-rows 和 grid-template-columns

这两个属性用于定义网格的行和列的尺寸。支持的单位包括 px、%、fr（弹性单位）等。例如：

.container {
  grid-template-columns: repeat(3, 1fr); /* 三等分列 */
  grid-template-rows: 100px minmax(50px, auto); /* 行高分别为 100px 和自适应 */
}

• repeat() 函数简化了重复列的定义，如 repeat(3, 1fr) 表示三列，每列占据 1 份弹性空间。
• minmax() 可设置最小和最大值，确保内容不会溢出或过于紧凑。

2.2 网格线的命名与定位：grid-template-areas

通过为网格线命名，可以更直观地布局项目。例如：

.container {
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

配合 HTML 结构：

<div class="container">
  <div class="header" grid-area="header"></div>
  <div class="sidebar" grid-area="sidebar"></div>
  <div class="main" grid-area="main"></div>
</div>

此代码将容器划分为两行三列，通过 grid-area 属性直接关联项目到命名区域，如同在棋盘上标注坐标。

2.3 自动化布局：grid-auto-rows 和 grid-auto-columns

当项目超出显式定义的网格区域时，grid-auto-rows 和 grid-auto-columns 会决定新增轨道的尺寸。例如：

.container {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px; /* 新增行默认高度为 100px */
}

此设置下，若容器内有超过两列的项目，多余的项目将自动按行排列，并继承默认行高。

三、进阶技巧：让网格“活”起来

3.1 灵活间距：gap 属性

gap 属性可设置网格轨道之间的间距，分为 row-gap（行间距）、column-gap（列间距）或简写 gap。例如：

.container {
  gap: 20px 10px; /* 列间距 10px，行间距 20px */
}

此属性替代了旧版的 grid-row-gap 和 grid-column-gap，简化了代码。

3.2 对齐与分布：align-items 和 justify-items

这两个属性分别控制项目在行和列方向上的对齐方式：

• align-items: 垂直方向（行轴）的对齐方式，如 start、end、center、stretch（默认值）。
• justify-items: 水平方向（列轴）的对齐方式。

例如：

.container {
  align-items: center;
  justify-items: end;
}

此代码会使所有项目在容器中垂直居中，并向列的右侧对齐。

3.3 响应式设计：媒体查询与弹性单位

通过结合 fr 单位和媒体查询，可轻松实现响应式布局。例如：

.container {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

此代码允许列根据视口宽度自动调整数量，每列最小宽度为 300px，剩余空间均分。

四、实战案例：从简单到复杂

4.1 案例 1：两栏布局

需求：左侧固定宽度导航栏，右侧自适应内容区域。

代码实现：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

配合 HTML 结构：

<div class="container">
  <nav>导航栏内容</nav>
  <main>主要内容区域</main>
</div>

此布局通过固定列宽和弹性列的组合，实现经典两栏结构。

4.2 案例 2：响应式三列布局

需求：移动端单列，平板两列，桌面端三列。

代码实现：

.container {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

此代码通过媒体查询动态调整列数，实现响应式适配。

4.3 案例 3：复杂棋盘格

需求：创建类似棋盘的 4x4 网格，其中合并某些单元格。

代码实现：

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 5px;
}

.item1 {
  grid-column: 1 / span 2; /* 占据两列 */
  grid-row: 1 / span 3; /* 占据三行 */
}

通过 grid-column 和 grid-row 属性，可以精准控制项目的跨行跨列范围。

结论：网格布局的未来与你的起点

CSS 网格布局不仅是一种技术，更是一种思维模式的革新。它将二维空间的控制权完全交还给开发者，使得复杂布局的实现变得像拼接乐高积木般直观。

对于初学者而言，建议从基础语法开始，逐步尝试两栏、响应式等常见场景；中级开发者则可探索网格与 Flexbox 的结合、动态间距计算等进阶用法。

记住，掌握 CSS 网格布局的关键在于理解其“二维坐标系”的核心思想，并通过实践将抽象概念转化为代码。无论是电商商品列表、仪表盘布局，还是创意型网页设计，网格布局都能为你提供优雅的解决方案。

现在，是时候打开你的编辑器，用网格布局重构一个项目，感受它带来的效率提升吧！