前端 CSS 经典：grid 栅格布局（上）https://developer.aliyun.com/article/1513269?spm=a2c6h.13148508.setting.19.f8774f0euyBLtl
10. justify-items
单元格内容水平位置设置：stretch、start、end、center
10.1 stretch
默认单元格内容水平填充单元格
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-items: stretch; span { border: 1px solid; } }
10.2 start
单元格内容水平靠右
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-items: start; span { border: 1px solid; } }
10.3 end
单元格内容水平靠左
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-items: end; span { border: 1px solid; } }
10.4 center
单元格内容水平居中
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-items: center; span { border: 1px solid; } }
11. align-items
单元格内容垂直位置：stretch、start、end、center
11.1 stretch
单元格内容垂直填充
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); align-items: stretch; span { border: 1px solid; } }
11.2 start
单元格内容垂直靠上
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); align-items: start; span { border: 1px solid; } }
11.3 end
单元格内容垂直靠下
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); align-items: end; span { border: 1px solid; } }
11.4 center
单元格内容垂直居中
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); align-items: center; span { border: 1px solid; } }
12. place-items
是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。例：设置单元格内容垂直和水平居中
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); place-items: center; span { border: 1px solid; } }
13. justify-content
容器内容水平位置：start、end、center、stretch、space-around、space-between、space-evenly
13.1 start
默认容器内容水平靠左
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: start; span { border: 1px solid; } }
13.2 end
例：设置容器内容水平靠右
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: end; span { border: 1px solid; } }
13.3 center
例：设置容器内容水平居中
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: center; span { border: 1px solid; } }
13.4 space-around
例：设置容器内容水平平均分布，项目间距是项目距离容器边框的两倍
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: space-around; span { border: 1px solid; } }
13.5 space-between
例：设置容器内容水平平均分布，靠近容器边框项目紧贴容器，其余水平项目平均间距
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: space-between; span { border: 1px solid; } }
13.6 space-evenly
例：设置容器内容水平平均分布，项目间距和项目距离容器边框间距相等
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-content: space-evenly; span { border: 1px solid; } }
14. align-content
容器内容垂直位置：start、end、center、stretch、space-around、space-between、space-evenly，同 justify-content 属性一致。一般需要给容器设置固定高度。align-content 属性才有效。例：设置容器内容垂直居中
.container { height: 500px; background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 100px); align-content: center; span { border: 1px solid; } }
15. place-content
是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。例：设置容器内容水平居中，垂直居中。
.container { height: 500px; background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 100px); place-content: center; span { border: 1px solid; } }
三 项目属性
1. grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area
grid-column-start: number; 左边框垂直网格线
grid-column-end: number; 右边框垂直网格线
grid-column: grid-column-start / grid-column-end; 左、右边框垂直网格线简写
grid-row-start: number; 上边框垂直网格线
grid-row-end: number; 下边框垂直网格线
grid-row: grid-column-start / grid-column-end; 左、右边框垂直网格线简写
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 上、左、下、右边框垂直网格线简写
number 值默认从 1 开始依次递增。
例：设置一个 3 列每列宽 200px，3 行每行高 200px，让内容为 1 的项目居中。
.container { background: green; display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(3, 200px); span { border: 1px solid; } .item1 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: red; } } // grid-column、grid-row 简写 .container { background: green; display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(3, 200px); span { border: 1px solid; } .item1 { grid-column: 2 / 3; grid-row: 2 / 3; background: red; } } // grid-area 简写 .container { background: green; display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(3, 200px); span { border: 1px solid; } .item1 { grid-area: 2 / 2 / 3 / 3; background: red; } }
2. justify-self
单元格内容的水平位置，同 justify-items 但只作用于单个项目。赋值：start、end、center、stretch。
3. align-self
单元格内容的垂直位置，同 align-items 但只作用于单个项目。赋值：start、end、center、stretch。
4. place-self
justify-self 和 align-self 简写，同 place-items 但只作用于单个项目。只有一个值时，第二个值默认与第一个值相同。
