Grid 项目属性篇 | 每天学一点Grid
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情
Grid 项目属性
Grid 和 flex 类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性。
本文我们先来看一下Grid 给我们提供的项目属性， grid-column-[ start | end ]、grid-row-[ start | end ]、grid-column、grid-row、grid-area、justify-self、align-self、place-self 属性。
1. grid-column-[ start | end ]、grid-row-[ start | end ] 属性
这几个属性，我们在前面讲解 grid-auto-flow 时，已经见过了，表示指定项目的四个边框，分别定位在哪根网格线。
这里我们来回顾一下：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
.item {
text-align: center;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
line-height: 150px;
}
/* 指定第一个项目的起始位置为网格线 1，结果位置为网格线 3*/
.item:first-of-type {
background: #ef342a;
grid-column-start: 1;
grid-column-end: 3;
}
/* 指定第二个项目的起始位置为网格线 1，结果位置为网格线 3*/
.item:nth-of-type(2) {
background: #00a0a0;
grid-column-start: 1;
grid-column-end: 3;
}
效果如下：
通过指定项目的 grid-column-[ start | end ]、grid-row-[ start | end ] 属性，我们可以很轻松的制作出下面的布局效果。
仅仅只需要几行代码即可：
.item:first-of-type {
background: #ef342a;
/* 设置第一个项目的四个边框 */
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
}
这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。
例如：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: [col1] 150px [col2] 150px [col3] 150px [col4];
grid-template-rows: [row1] 150px [row2] 150px [row3] 150px [row4];
}
.item:first-of-type {
background: #ef342a;
grid-row-start: row2;
grid-row-end: row4;
grid-column-start: col1;
grid-column-end: col3;
}
效果同上。
这四个属性的值还可以使用 span 关键字，表示“跨越”，即左右边框（上下边框）之间跨越多少个网格。
例如：
.item:first-of-type {
background: #ef342a;
grid-row-start: span 2;
grid-column-start: span 2;
}
效果如下：
2. grid-column、grid-row 属性
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
例如：
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
/* 可以简写为 */
grid-row: 2/4;
grid-column: 1/3;
这两个属性之中，也可以使用 span 关键字，表示跨越多少个网格。
grid-column: 1 / 3;
grid-row: 1 / 3;
/* 可以简写为 */
grid-column: 1 / span 2;
grid-row: 1 / span 2;
表示该项目所占据的区域，包括第一行、第二行以及第一列和第二列。
- grid-area 属性
grid-area 属性用于指定项目放在哪一个区域。
例如：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.item:first-of-type {
background: #ef342a;
grid-area: e; /* 指定该项目所在的区域为 e */
}
效果如下：
grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。
语法如下：
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
例如，上面的代码可以改写为：
.item:first-of-type {
background: #ef342a;
grid-area: 2 / 2 / 3 / 3;
}
效果同上。
4. justify-self、align-self、place-self 属性
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。
语法如下：
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
这两个属性都可以取下面 4 个值：
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满单元格的整个宽度（默认值）
具体示例如下：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
.item {
text-align: center;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
line-height: 150px;
}
.item:first-of-type {
background: #ef342a;
justify-self: center; /* 和 justify-items 属性作用相同，只不过是设置单个项目的对齐方式 */
}
效果如下：
place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。
语法如下：
place-self: <align-self> <justify-self>;
例如：
place-self: center center;
如果省略第二个值，place-self 属性会认为这两个值相等。
