前端CSS精讲05：Grid网格布局——现代页面最强二维布局方案
文章目录
- 一、什么是 Grid 布局
- 二、开启 Grid
- 三、最核心：划分行和列
- 1. 定义列数与宽度
- 2. 定义行数与高度
- 3. 自适应等分：fr 单位（Grid 神器）
- 4. 自动适应内容
- 四、格子之间的间距
- 五、对齐方式（和 Flex 很像）
- 1. 整个网格在容器里的位置
- 2. 整个网格整体对齐
- 六、子项：指定放在哪个格子
- 七、最简单的通用布局示例
- 八、Grid 与 Flex 如何选择
- 九、本节小结
大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。
上一节我们讲了 Flex 布局，它是一维布局（要么一行、要么一列）。
而 Grid 是二维布局，可以同时控制行和列，直接把页面划分为“单元格”，做复杂布局、后台管理系统、响应式版面极其方便。
一、什么是 Grid 布局
Grid 即网格布局，把父容器变成“网格”，可以定义多少行、多少列，然后直接把元素放进指定格子里。
- 父容器：grid 容器
- 子元素：grid 项目
- 一维 Flex → 适合导航、列表、居中
- 二维 Grid → 适合版面、卡片、后台布局
二、开启 Grid
.container{display:grid;}