CSS Grid 网格布局完整指南：从容器到项目，实战详解

一、什么是 Grid 布局？

Grid 布局（网格布局）是 CSS 中最强大的布局方案之一。它将网页划分为一个个网格，可以任意组合不同的行和列，实现复杂且响应式的布局效果。与 Flex 布局（一维布局）不同，Grid 是二维布局，可以同时控制行和列。

Flex 布局是轴线布局，只能针对项目在轴线上排列；Grid 布局则是将容器划分为单元格，直接控制项目所在区域。

二、基本概念

2.1 容器与项目

三、容器属性详解

3.1 定义网格：grid-template-columns / grid-template-rows

3.5 对齐方式

项目在单元格内的对齐：

整个内容区域在容器内的对齐：

3.6 隐式网格：grid-auto-rows / grid-auto-columns

当项目超出明确定义的网格时，用于设置自动创建的行/列大小。

• 容器 ：采用 display: grid 或 display: inline-grid 的元素。

• 项目 ：容器的直接子元素 （注意：不是所有后代元素）。

  2.2 行、列、单元格、网格线

• 行：水平的网格区域

• 列：垂直的网格区域

• 单元格：行和列的交叉区域

网格线 ：划分网格的线，n 行有 n+1 条水平网格线，m 列有 m+1 条垂直网格线3.2 网格间距：gap3.3 网格区域：grid-template-areas

3.4 自动排列：grid-auto-flow

控制项目自动排列的方向：

• row（默认）：先行后列

• column：先列后行

• row dense / column dense：尽量填满空格

• justify-items：水平对齐（start | end | center | stretch）

• align-items：垂直对齐

• place-items: <align-items> <justify-items>

• justify-content：水平对齐

• align-content：垂直对齐

• place-content: <align-content> <justify-content>

四、项目属性

4.1 指定项目位置4.2 指定项目所在区域：grid-area4.3 单个项目对齐：justify-self / align-self / place-self

五、实战示例：经典布局

5.1 两栏布局5.2 十二网格系统5.3 圣杯布局（Header, Main, Sidebar, Footer）六、总结

Grid 布局非常适合构建复杂的、响应式的网页结构，是现代 CSS 布局的必备技能。