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，将其变为网格容器：

css 复制代码

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

2. 定义列和行（核心）

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

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

css 复制代码

.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 函数）

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

css 复制代码

.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 列自适应网格

html 复制代码

<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 实现语义化布局：

html 复制代码

<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 实现自适应列数：

css 复制代码

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

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

五、进阶技巧

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

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

css 复制代码

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

网格嵌套：网格项可以再作为网格容器，实现多层布局。
兼容性 ：现代浏览器（Chrome/Firefox/Safari/Edge）均支持，无需前缀；IE11 仅支持旧版语法（-ms- 前缀），一般无需兼容。

六、Grid vs Flex

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

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