实用指南：CSS 网格布局（Grid Layout）核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解

CSS 网格布局（Grid Layout）是 CSS 中最强大的二维布局系统，专门用于同时处理行和列的布局，相比弹性布局（Flex）（一维布局）更适合复杂的页面结构设计。下面从核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解。

一、核心概念

先理解 Grid 的基础术语，避免后续混淆：

术语	说明
网格容器（Grid Container）	应用 display: grid 的父元素，所有直接子元素自动成为网格项
网格项（Grid Item）	网格容器的直接子元素（不包含后代元素）
网格轨道（Grid Track）	网格的行（row）或列（column），轨道之间的间距叫「网格间距」
网格单元格（Grid Cell）	行和列交叉形成的最小单位（类似表格的单元格）
网格线（Grid Line）	划分轨道的分隔线（横向 / 纵向，从 1 开始计数，也可负数反向计数）
网格区域（Grid Area）	多个相邻单元格组成的矩形区域

二、基础使用（快速上手）

1. 定义网格容器

首先给父元素设置 display: grid，将其变为网格容器：

.container {
display: grid; /* 块级网格，占满一行 */
/* display: inline-grid; 行内网格，宽度由内容决定 */
}

2. 定义列和行（核心）

用 grid-template-columns（列）和 grid-template-rows（行）定义轨道尺寸，支持多种单位：

• 固定单位：px、em、rem
• 相对单位：%、fr（剩余空间份数，Grid 专属）
• 函数：repeat()（重复）、minmax()（最小最大）、auto（自适应）

.container {
display: grid;
/* 定义 3 列：第一列 100px，第二列 2fr，第三列 1fr */
grid-template-columns: 100px 2fr 1fr;
/* 定义 2 行：第一行 50px，第二行自适应 */
grid-template-rows: 50px auto;
/* 网格间距（行间距 + 列间距，简写） */
gap: 10px; /* 等价于 row-gap: 10px; column-gap: 10px; */
}

3. 重复轨道（repeat 函数）

简化多列 / 多行的重复定义：

.container {
display: grid;
/* 重复 4 次，每次 1fr → 4 列，每列占 1/4 剩余空间 */
grid-template-columns: repeat(4, 1fr);
/* 重复 2 次「100px 2fr」→ 100px 2fr 100px 2fr */
grid-template-columns: repeat(2, 100px 2fr);
}

三、关键属性（容器 + 项目）

1. 网格容器属性

属性	作用	常用值
grid-template-columns/rows	定义列 / 行尺寸	px、fr、repeat()、minmax()
gap（row-gap/column-gap）	网格间距	数值 + px/rem
grid-template-areas	命名网格区域	自定义名称（如 header）、.（空单元格）
justify-items	项目在单元格内水平对齐	start/center/end/stretch（默认）
align-items	项目在单元格内垂直对齐	start/center/end/stretch（默认）
place-items	简写（垂直 + 水平）	center center（先垂直后水平）
justify-content	整个网格在容器内水平对齐（网格总尺寸 < 容器时生效）	start/center/end/space-between/space-around
align-content	整个网格在容器内垂直对齐	同上
grid-auto-flow	项目自动排列方式	row（默认，按行排）、column（按列排）、dense（填充空白）

2. 网格项目属性

（作用于网格容器的直接子元素，精准控制单个项目）

属性	作用	示例
grid-column-start/end	项目占据的列范围（通过网格线）	grid-column-start: 1; grid-column-end: 3;（跨 1-3 列）
grid-row-start/end	项目占据的行范围	grid-row: 2 / 4;（简写，跨 2-4 行）
grid-column/row	简写（start /end）	grid-column: 1 / span 2;（从第 1 列开始，跨 2 列）
grid-area	绑定命名区域 / 简写行列范围	grid-area: header; 或 grid-area: 2 / 1 / 4 / 3;
justify-self	单个项目水平对齐（覆盖容器 justify-items）	center/end
align-self	单个项目垂直对齐（覆盖容器 align-items）	center/end

四、实战示例

示例 1：基础 3 列自适应网格

<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>
<style>
  .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列等分 */
  gap: 15px;
  padding: 20px;
  background: #f5f5f5;
  }
  .item {
  padding: 20px;
  background: #42b983;
  color: white;
  text-align: center;
  }
</style>

示例 2：经典页面布局（头部 + 侧边 + 主体 + 底部）

用 grid-template-areas 实现语义化布局：

<div class="layout">
<header>头部</header>
<aside>侧边栏</aside>
<main>主体内容</main>
<footer>底部</footer>
</div>
<style>
  .layout {
  display: grid;
  height: 100vh; /* 占满视口高度 */
  /* 定义列：侧边 200px，主体自适应 */
  grid-template-columns: 200px 1fr;
  /* 定义行：头部 60px，主体自适应，底部 60px */
  grid-template-rows: 60px 1fr 60px;
  /* 命名网格区域 */
  grid-template-areas:
  "header header"  /* 第一行：header 跨两列 */
  "aside main"     /* 第二行：aside + main */
  "footer footer"; /* 第三行：footer 跨两列 */
  gap: 10px;
  }
  header { grid-area: header; background: #42b983; }
  aside { grid-area: aside; background: #999; }
  main { grid-area: main; background: #eee; }
  footer { grid-area: footer; background: #333; color: white; }
</style>

示例 3：响应式网格（适配不同屏幕）

结合 minmax() 和 auto-fill 实现自适应列数：

.container {
display: grid;
/* auto-fill：自动填充列数；minmax(200px, 1fr)：列宽最小 200px，最大 1fr */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

效果：屏幕宽度足够时自动增加列数，不足时自动换行，列宽不小于 200px。

五、进阶技巧

1. fr 单位的坑：fr 基于「容器可用空间」（容器宽度 - 列间距 - 固定列宽）分配，而非容器总宽度。

2. **dense 填充空白：**当项目跨列 / 行导致空白时，加grid-auto-flow: dense自动填充：

   .container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-flow: dense; /* 填充空白 */
   }
   .item-2 {
   grid-column: span 2; /* 跨 2 列 */
   }

3. 网格嵌套：网格项可以再作为网格容器，实现多层布局。

4. 兼容性：现代浏览器（Chrome/Firefox/Safari/Edge）均支持，无需前缀；IE11 仅支持旧版语法（-ms- 前缀），一般无需兼容。

六、Grid vs Flex

特性	Grid	Flex
维度	二维（行 + 列）	一维（行 或 列）
适用场景	复杂页面布局、网格卡片、多行列结构	单行 / 单列布局（如导航、居中、列表）
核心优势	精准控制行列关系，支持区域命名	灵活的单行 / 列对齐，适配性强

总结：Grid 是二维布局的首选，适合需要同时控制行和列的场景；Flex 适合一维线性布局。实际开发中可结合使用（如 Grid 做整体布局，Flex 做内部元素对齐）。