grid布局笔记到这里，基本就差不多完了，剩下的项目属性，有的是之前项目属性1记录的属性的合并简写形式，有的是和容器某些属性效果一致，区别只是在于只是作用于某个项目和作用于所有项目的区别，今天在这里都会简略的提及。

grid-column属性、grid-row属性

grid-column属性是grid-column-start和grid-column-end的合并简写模式，grid-row是grid-row-start和grid-row-end的合并简写模式，它们的语法是这样的

 .item {
 grid-column ： <grid-column-start> / <grid-column-end> ;
 grid-row ： <grid-row-start> / <grid-row-end> ;
}
/<grid-row-end>/<grid-row-start>/<grid-column-end>/<grid-column-start>

在使用这两个属性的时候，可以简化我们的代码。下面是一个例子

.item-1{
 grid-column:1 / 3;
 grid-row: 1 / 3
}
/*等同于 */
.item-1{
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}

上面代码含义，这里不多说，不明白的复习一下 。

这两个属性也是可以使用span关键字，表示跨越了多少个网格。

.item-1{
 grid-column:1 / 3;
 grid-row: 1 / 3
}
/*等同于 */
.item-1{
 grid-column:1 / span 2;
 grid-row: 1 / span 2; 

}
/*等同于 */
.item-1{
 grid-column-start:1;
 grid-column-end: span 2;
 grid-row-start: 1;
 grid-row-end: span 2;
}

斜杠（/）和斜杠后面的内容可以省略，默认省略跨越一个网格。

.item-1{
 grid-column:1;
 grid-row: 1
}
/*等同于 */
.item-1{
 grid-column-start:1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;
}

grid-area属性

grid-area属性指定项目放在哪一个区域。这个属性在介绍容器属性grid-template-areas时有提及过。这里介绍它的另一方面——作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。语法是：

.item {
 grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
/<column-end>/<row-end>/<column-start>/<row-start>

下面是一个例子：

.item-1{
 grid-area : 1 / 2 / 1 / 2 ;
} 

/*等同于 */
.item-1{
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start:1;
 grid-column-end: 2;
}

justify-self 属性， align-self属性，place-self属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

它们的取值都可以取以下值

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

至于具体效果，可以看一下 。只看一个项目的效果就可以了。

place-self属性是align-self属性和justify-self属性的合并简写形式，它的语法是这样的：

place-self: <align-self> <justify-self>;
/<justify-self>/<align-self>

例如：

 place-self ：start end；
/* 等同于 */
align--self : start ；
 justify-self：end；

如果省略了第二个值，就是默认第一个值和第二个值取同一个值。