上一篇我們詳細介紹了grid佈局，這一篇我們總結一下，方便查詢：

定義grid容器的方式：

display: grid;
或者
display：inline-grid;//行內塊元素

容器屬性：

grid-template-columns：定義列寬

grid-template-rows：定義行高

grid-auto-columns：在網格外自動新增的單元格 列寬 ，和 定義列寬 寫法一樣 沒舉例
grid-auto-rows ：早網格外自動新增的單元格 行高, 和 定義行高 寫法一樣 沒舉例

舉例：

        .container{
            /* px */
            grid-template-columns
 
: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            /* 百分比 */
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
            /* repeat關鍵字 重複*/
            grid-template-columns: repeat(3, 33.33%);
            grid-template-rows
 
: repeat(3, 33.33%);
            /* repeat關鍵字 重複模式 */
            grid-template-columns: repeat(2, 100px 20px 80px);
            /* auto-fill   單元格大小固定容器大小不固定時  自動填充滿 */
            grid-template-columns: repeat(auto-fill, 100px);
            /* fr關鍵字   */
            grid-template-columns: 1fr 2fr;/* 後者是前者的二倍 */
 

            grid-template-columns: 60px 1fr 60px;/* 兩邊固定中間沾滿 */
            /* minmax(最小寬度,最大寬度) */
            grid-template-columns: 1fr 1fr minmax(100px, 1fr);
            /* auto 由瀏覽器自身決定長度 */
            grid-template-columns: 100px auto 100px;
            /* 定義網格線名稱 */
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }

grid-row-gap：單元格行間距

grid-column-gap：單元格列間距

grid-gap：簡寫形式； 行間距 列間距

舉例：

.container{
            grid-row-gap: 10px;
            grid-column-gap: 20px;
            /* 簡寫 */
            grid-gap:10px 20px;
        }

grid-template-areas：指定單元格區域名稱；

舉例：

.container{
            grid-template-areas: 'a b c'
                                 'd e f'
                                 'g h i';
            /* 一個區域可以由多個單元格組成 */
            grid-template-areas: 'a a a'
                                 'b b b'
                                 'c c c';
            /* 某些區域不需要利用 用 . 標識即可 */
            grid-template-areas: 'a . c'
                                 'd . f'
                                 'g . i';
        }

grid-auto-flow：決定先行後列、還是先列後行

舉例：

.container{
            grid-auto-flow:row;/*預設值  先行後列*/
            grid-auto-flow:row dense;/*某些專案指定位置後 空白位置 按照  先行後列填充*/
            grid-auto-flow:column;/*先列後行*/
            grid-auto-flow:column dense;/*某些專案指定位置後 空白位置 按照  先列後行填充*/
        }

justify-items :，設定單元格內容的水平位置（左中右）
align-items :，設定單元格內容的垂直位置（上中下）
place-items :，是align-items屬性和justify-items屬性的合併簡寫形式。

.container{
            justify-items: start | end | center | stretch;
            align-items: start | end | center | stretch;
            /* 簡寫 */
            /* place-items: 單元格內垂直對齊方式 單元格內水平對齊方式; */
            place-items: start start;
        }

justify-content :container內整個內容區域的水平位置（上中下）預設為stretch 類似於flex佈局中的justify-content，

align-content :，container內整個內容區域的垂直位置（上中下） 預設為stretch 類似於flex佈局中的align-items，

place-content :簡寫方式：垂直屬性 水平屬性

.container{
            justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
            align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
             /*簡寫  */
             /* place-content: 垂直對齊方式 水平對齊方式 */
             place-content: space-around space-evenly;
        }

grid-template 屬性，合併寫法不建議使用
grid 屬性,合併寫法不建議使用

grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式。

grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。從易讀易寫的角度考慮，還是建議不要合併屬性，所以這裡就不詳細介紹這兩個屬性了。

專案屬性：

指定專案位置

網格線在沒定義的情況下 從左到右 從1開始遞增 從上到下 從1開始遞增

grid-column-start ：，指定專案的左邊框線在哪個網格線上，或者是跨越情況（span number）
grid-column-end ：，指定專案的有邊框線在哪個網格線上，或者是跨越情況（span number）
grid-row-start ：，指定專案的上邊框線在哪個網格線上，或者是跨越情況 （span number）
grid-row-end ：，指定專案的下邊框線在哪個網格線上，或者是跨越情況 （span number）

簡寫

grid-column 屬性，grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式，
grid-row 屬性，grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式。

舉例：

.item{
            /* 指定 左 右 上  下  邊框線在哪條網格線上 */
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end:4;
            /* span 2  表示跨越 2個單元格 */
            grid-column-start:span 2;
            /* 簡寫 */
            grid-column: 1 / 3;
            grid-row: 2 / 4;
            /* 簡寫的 跨越寫法  */
            grid-column:1 / span 2;
            grid-row:2 / span 2;
        }

grid-area ：指定專案所在的區域

.item{
            /* 直接指定區域名稱 */
            grid-area: i;
            /* grid-area屬性還可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合併簡寫形式，直接指定專案的位置。 */
            /* 上 / 左 / 下 / 右 */
             /* 空格不是必須的 */
             grid-area: 3 / 3 / 4 / 4;
        }

justify-self ：設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，也是隻作用於單個專案。 預設值是stretch
align-self ：設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個專案。預設值是stretch
place-self ：上面兩個屬性的縮寫；place-self:<align-self><justify-self>; 垂直 水平

.item{
            justify-self: start | end | center | stretch;
            align-self: start | end | center | stretch;
            /* 簡寫 */
            place-self:center center;
        }

。