前言
上一篇《前端篇 08》中，我们学习了Flex弹性布局，掌握了现代前端一维布局的核心技能。你会发现Flex处理行或列方向的排列非常强大，几行代码就能搞定水平垂直居中、等分布局等常见需求。但当我们面对更复杂的页面——比如后台管理系统的多栏布局、博客首页的文章卡片网格、仪表盘的数据面板排列时，Flex就显得有些力不从心了，因为它一次只能处理一个方向的布局。
本篇作为前端篇的第九篇，我们将学习CSS最强大的布局方案——Grid网格布局。Grid布局是CSS3推出的二维布局模型，可以同时控制行和列，是处理复杂页面布局的终极武器。Flex解决’一维’问题，Grid解决’二维’问题，两者配合使用能够搞定前端开发中99%的布局需求。作为全栈开发者，掌握了Flex+Grid双剑合璧，你就拥有了处理任何页面布局的能力。
本文为Python全栈开发者量身打造，从最基础的概念讲起，详细讲解Grid布局的所有核心属性，每一个属性都有清晰的语法说明和可视化示例。最后通过后台管理页面布局和电商首页两个综合实战，对比Flex与Grid的差异，让你彻底掌握二维布局的核心技巧。
本节核心学习内容：
文章目录
- 前言
- 一、Grid布局概述
-
- 1.1 Flex的局限性
- 1.2 什么是Grid布局
- 1.3 Grid基本概念
- 二、Grid容器属性详解（上）
-
- 2.1 display: grid：启用Grid布局
- 2.2 grid-template-columns / grid-template-rows：定义轨道
- 2.3 gap：设置行列间距
- 2.4 grid-template-areas：命名区域布局
- 三、Grid容器属性详解（下）
-
- 3.1 grid-auto-flow：自动排列方向
- 3.2 grid-auto-columns / grid-auto-rows：自动轨道尺寸
- 3.3 对齐属性：justify-items / align-items / place-items
- 3.4 内容对齐：justify-content / align-content / place-content
- 四、Grid项目属性详解
-
- 4.1 grid-column / grid-row：跨行跨列
- 4.2 grid-area：区域定位
- 4.3 项目对齐：justify-self / align-self / place-self
- 五、Grid经典布局案例
-
- 5.1 圣杯布局（三栏自适应）
- 5.2 卡片网格布局
- 5.3 12栅格系统（仿Bootstrap）
- 六、Flex vs Grid 选型指南
- 七、综合实战：Grid+Flex构建后台管理页面
-
- 7.1 最终效果
- 7.2 完整代码
- 7.3 代码解析：Grid与Flex的配合
- 八、常见误区与避坑指南
- 九、核心总结：Grid布局属性速查表
-
- Grid容器属性
- Grid项目属性
- 常用函数与关键字
- Flex vs Grid 快速选型
- 十、专栏订阅
一、Grid布局概述
1.1 Flex的局限性
在上一篇中我们提到，Flex是一维布局模型，它一次只能处理行或列中的一个方向。当你需要同时控制行和列时，Flex就暴露出明显的短板：
- 无法精确控制多行多列：用Flex+flex-wrap实现网格虽然可行，但每一行的元素宽度需要精确计算，且无法保证列与列之间的对齐
- 无法实现跨行跨列：Flex项目都是在一个维度上排列，无法让一个元素同时占用多行和多列
- 代码复杂繁琐：实现一个简单的三栏布局，使用Flex需要嵌套多个容器，代码层级深、可读性差
这些局限并不是Flex的缺点，而是它设计之初的定位——Flex擅长一维排列。面对二维网格的需求，我们需要Grid布局。
1.2 什么是Grid布局
Grid（Grid Layout）即网格布局，是CSS推出的第一个真正意义上的二维布局系统。它将容器划分为行和列，形成一个个网格单元格，然后你可以将项目精确地放置在任意一个或多个单元格中。
核心优势：
- 二维控制：同时控制行和列，这是Grid最核心的优势
- 精确布局：可以精确指定每个项目的位置
