grid布局问题
2018-01-06 本文已影响169人
九歌1
主要记录和解释grid属性，不做解释
父级
display:reid属性
| 属性 | 值 | 说明 |
|---|---|---|
| display | gird,inline-gird,subgird | 定义父级容器，继承父级容器 |
| grid-template-columns | px,fr,%,auto,em ~ ~ | 用来定义网格的列 |
| grid-template-rows | px,fr,%,auto,em ~ ~ | 用来定义网格的行 |
| grid-template-areas | grid-area | 通过引用 grid-area 属性名称来定义网格模板。 |
| grid-column-gap | px,fr,%,auto,em ~ ~ | 指定网格线(grid lines)列的大小。 |
| grid-row-gap | px,fr,%,auto,em ~ ~ | 指定网格线(grid lines)行的大小。 |
| grid-gap | px,fr,%,auto,em ~ ~ | 指定网格线行/列的大小的缩写 |
| justify-items （子级左右） | start、end、center、stretch | 左对齐、右对齐、左右居中、填充 |
| align-items （子级上下） | start、end、center、stretch | 上对齐、下对齐、上下居中、填充 |
| justify-content （父级左右） | start、end、center、stretch、space-around、space-between、space-evenly | 左对齐、右对齐、左右居中、填充、左右固定间隔居中、均匀间隔居中、左右均匀间隔居中 |
| align-content （父级上下） | start、end、center、stretch、space-around、space-between、space-evenly | 上对齐、下对齐、上下居中、填充、上下固定间隔居中、上下间隔居中、上下均匀间隔居中 |
| grid-auto-flow | row、column、dense | 告诉自动布局算法依次填充每行或者每列、告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺 |
子级
items属性
| 属性 | 值 | 说明 |
|---|---|---|
| grid-column-start | name/number/auto | 行开始网格线 |
| grid-column-end | name/number/auto | 行结束网格线 |
| grid-row-start | name/number/auto | 列开始网格线 |
| grid-row-end | name/number/auto | 列开始网格线 |
| grid-area | name | 命名模板名称 |
| justify-self | start、end、center、stretch | 左对齐、右对齐、左右居中、填充 |
| align-self | start、end、center、stretch | 上对齐、下对齐、上下居中、填充 |
