2019.12.30第九节课 grid布局

Grid 网格布局

[toc]

1. Grid中的术语

• 网格线(grid lines): 编号, 命名
• 轨道(grid tracks): 二条线中间的空间, px, %, fr,auto
• 单元格(grid cell): 四条网格线包起来的封闭空间
• 网格区域(grid area): 多个单元格形成的矩形区域
• 网格间距(grid gap): 行或列之间的间隙

---

2. Grid容器属性

2.1 创建显式网格轨道

• grid-template-colums: 基于列,定义网络线的名称与与轨道大小
• grid-template-rows: 基于行,定义网络线的名称与与轨道大小
• grid-template-areas: 命名网格区域(配合gird项目的grid-area属性)

2.2 创建隐式网格轨道

• grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
• grid-auto-columns: 隐式网格的列宽
• grid-auto-rows: 隐式网格的行高

2.3 创建轨道间距

• grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙

2.4 所有项目在网络容器中的对齐方式

• justify-contens: 设置所有项目在网格容器中的水平对齐方式
• align-content: 设置所有项目在网格容器中的垂直对齐方式
• place-content: justify-content和align-content的属性简写

2.5 所有项目在单元格中的对齐方式

• justify-items: 设置所有项目在单元格内的水平对齐方式
• align-items: 设置所有项目在单元格内的垂直对齐方式
• place-items: justify-items和align-items的属性简写

---

3. Grid项目属性

3.1 将项目放置到单元格中

• grid-column-start: 起始列编号
• grid-column-end: 终止列编号

• grid-column: 上面二属性缩写

• grid-row-start: 起始行编号

• grid-row-end: 终止行编号
• grid-row: 上面二属性编写

3.2 将项目放置到网格区域中

• grid-area: top/left/bottom/right: 将项目按逆时针顺序放置
• grid-area: area-name: 将项目放置到已命名的网格区域中

3.3 项目在单元格中的对齐方式

• justify-self: 设置项目在单元格中的水平对齐方式
• align-self: 设置项目在单元格中的垂直对齐方式
• place-self: justify-self和align-self的属性简写