CSS之grid布局中各个属性及使用

Grid 布局

准备工作

• 编辑器: VSCODE
• 浏览器: FireFox
• 浏览器同步插件: Live Server

1. 基本术语

• 容器: 使用网格布局的元素
• 项目: 容器中的子元素
• 网格线: 将容器划分为行与列的直线
• 显式网络: 由用户根据项目数量指示容器生成的网格
• 隐式网格: 由容器根据项目数量自动生成的网格
• 单元格: 项目放置的具体空间
• 网格区域: 一个以上的单元格组成的矩形区域

网格布局的基本步骤: 1. 生成网格; 2. 放置项目

---

2. 创建 Grid 容器

• display: 声明使用网格布局的容器元素
• grid-auto-flow: 声明项目在网格中自动填充方案(行优先/列优先)
• grid-template-columns/rows: 在容器中显式地划分行与列,生成指定数量的单元格来放置项目

• grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们

• 代码演示：http://www.nflinetech.com/0413/grid1.html

---

3. 设置单元格数量与尺寸

• 固定宽度px: 固定大小
• 百分比%: 以容器大小为依据来计算
• 自动计算auto: 由浏览器决定长度
• 比例fr: 将容器空间按比例分配给每一个单元格
• 区间minmax(min,max): 设置单元格尺寸变化范围
• 重复生成repeat(): 快速生成相同大小单元格的

• 自动填充auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目

• 代码演示：http://www.nflinetech.com/0413/grid2.html

---

4. 将项目填充到指定单元格中

4.1 使用默认网格线划分单元格

• 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
• 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号

• 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中

• 代码演示：http://www.nflinetech.com/0413/grid3.html

4.2 使用命名网格线划分单元格

• 使用语义化的名称替代容器自动生成的数字网线线编号

• 同一条网络线可以有多个别名

• 代码演示：http://www.nflinetech.com/0413/grid4.html

4.3 重复设置单元格时, 命名网格线会自动添加索引

• repeat(3, [col-start] 100px [col-end]): 只需设置命名前缀,编号会自动生成
• grid-column-end: col-end 3;: 前缀加索引就可以引用到自动生成的命名网格线

---

5. 将项目填充到网格区域中

5.1 默认网格区域

• 设置项目属性grid-area: 将项目填充到指定容器的区域中

• 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列

• 代码演示：http://www.nflinetech.com/0413/grid5.html

5.2 命名网格区域

• 可以为每一个网格区域设置一个语义化的名称
• 具有名称的网络区域称之为命名区域
• 名称相同的网格区域会合并, 形成更大的区域空间

• 项目设置的区域名称后,会自动填充到容器中应对的命名区域中

• 代码演示：http://www.nflinetech.com/0413/grid6.html

5.3 网格区域占位符

• 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符

• 代码演示：http://www.nflinetech.com/0413/grid7.html

5.4 命名网格区域线默认名称

• 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
• 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

---

6. 设置所有项目在容器中的对齐方式

• justify-content: 设置所有项目在容器中水平方向的对齐方式
• align-content: 设置所有项目在容器中垂直方向的对齐方式

• place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

• 代码演示：http://www.nflinetech.com/0413/grid8.html

---

7. 设置所有项目在单元格或网格区域内的对齐方式

• justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
• align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
• place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式

• demo11.html: 所有项目在单元格中的对齐方式

• 代码演示：http://www.nflinetech.com/0413/grid9.html

---

8. 设置某个项目在单元格或网格区域内的对齐方式

• justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
• align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式

• place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

• 代码演示：http://www.nflinetech.com/0413/grid10.html

---

9. 设置容器中行与列之间的间距/间隙

• column-gap: 列间距
• row-gap: 行间距
• gap: 行间距 列间距: 简写

• gap: 值: 行与列相等,可只写一个值

• 代码演示：http://www.nflinetech.com/0413/grid11.html

---

个人总结：

• 经过学习，大致了解到了网格布局的各个属性，最开始我是完全不知道这个布局怎么使用，我想着这个布局我们的数据放到那里去，怎么布局呢，完全没想明白，但是现在我知道了，就是首先将页面变成一个一个的格子，然后将我们的数据放到一个一个的格子里面，这样我们布局就改变格子的布局就行，这样方便快捷很多，一开始真是脑筋完全没有转变过来，所以完全不知道这个布局有啥作用，但是现在真正了解了以后，会发现这个布局确实很强大且方便，很实用，属性还是特别多的，还是要靠自己去记忆，多练习，多敲代码，才能熟能生巧。