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 列自适应网格
<divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass="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实现语义化布局：
<divclass="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。
五、进阶技巧
fr 单位的坑：
fr基于「容器可用空间」（容器宽度 - 列间距 - 固定列宽）分配，而非容器总宽度。**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 列 */}网格嵌套：网格项可以再作为网格容器，实现多层布局。
兼容性：现代浏览器（Chrome/Firefox/Safari/Edge）均支持，无需前缀；IE11 仅支持旧版语法（
-ms-前缀），一般无需兼容。
六、Grid vs Flex
| 特性 | Grid | Flex |
|---|---|---|
| 维度 | 二维（行 + 列） | 一维（行 或 列） |
| 适用场景 | 复杂页面布局、网格卡片、多行列结构 | 单行 / 单列布局（如导航、居中、列表） |
| 核心优势 | 精准控制行列关系，支持区域命名 | 灵活的单行 / 列对齐，适配性强 |
总结：Grid 是二维布局的首选，适合需要同时控制行和列的场景；Flex 适合一维线性布局。实际开发中可结合使用（如 Grid 做整体布局，Flex 做内部元素对齐）。