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；

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