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的属性简写