【工作记录】css3 grid布局笔记
概述
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局
参数配置说明
| 属性 | 说明 | 可配置选项说明 |
|---|---|---|
| grid-template-rows/grid-template-columns | 定义行高/列宽 | px: 固定值 %：百分比 fr: 片段，分配剩余空间 auto: 先于fr计算，获取必要的最小空间 repeat: 简化重复值 |
| grid-auto-flow | 定义项目的排列顺序 控制排列方向 | row: 先填入第一行 column： 先填入第一列 row dense: 按行填充空白 column dense：按列填充空白 |
| grid-auto-rows/grid-auto-columns | 定义多余网格的行高/列宽 | |
| row-gap/column-gap | 行间距/列间距 | |
| gap | 同时设置行间距和列间距 | |
| grid-template-areas | 定义区域布局位置 | 通过grid-area设置某个块处于哪个位置 |
| justify-items/align-items | 设置内部布局相对于容器的水平/垂直位置 | stretch: 默认值，拉伸 start: 开始位置 center: 居中位置 end： 结束位置 |
| place-items | align-items和justify-items的简写 | 同时设置水平和垂直位置配置 参数同上 |
| justify-content/align-content | 设置容器相对于外部区域的水平/垂直位置 | start: 从行首开始 end：从行尾开始 center: 居中 stretch: 拉伸 占满 space-around: 剩余空间平均分配 space-between: 平均分配行、列间距 space-evenly: 所有间距平均分配 |
| place-content | align-content和justify-content的简写 | 配置参数同上 |
| grid-row-start/grid-row-end/grid-column-start/grid-column-end | 每个单元格的位置配置，配置标识从第几根网格线开始到第几根网格线结束，也可以使用span 标识间隔几根网格线 | number: 从第几根网格线开始，到第几根网格线结束 name: 需要先定义网格线 span number: 标识跨域几根网格线 |
| grid-column/grid-row | 上面配置的缩写形式 | 1/3 标识从1开始到3结束 |
| grid-area | 缩写形式 | 1/1/3/3 标识行和列都是从1开始到3结束 |
| align-self/justify-self | 单元格内容相对于单元格的水平和垂直位置 | stretch: 默认值 拉伸 start: 开始位置 center: 居中位置 end： 结束位置 |
| place-self | 上面配置的缩写形式 | 配置值同上 |