flex佈局不同的是，網格佈局（grid）是一個二維的佈局，可以建立任意行列的佈局。
首先來介紹幾個概念;
想象一個三行三列的佈局，網格線就是構成網格所有的線條，三行三列的佈局每行就會有4條網格線。
網格軌道就是相鄰兩條平行的網格線之間的部分。
和flex佈局一樣，他會有父容器和子專案，在這兒我們稱為網格容器和網格項。
接下來，我們從網格容器到網格項的各個基本屬性來介紹網格佈局。

網格容器
網格容器是決定將網格分為幾行幾列，所以首先實現網格佈局就要使該容器具有以下幾個屬性：

 display: grid;
    grid-template-columns
    grid-template-rows
    grid-gap 
    grid-template-areas
    grid-auto-flow: dense | row(default) | column
    justify-items: start|end|center|stretch(default) 
    align-items: 
    start|end|center|stretch(default)
    grid-auto-columns: 
 

網格佈局的父容器基本屬性就是以上幾個。

display：grid
表示為網格佈局，和flex佈局中的display：flex意義相同，同樣該屬性還可以取值：inline-grid和subgrid

grid-template-columns
建立網格的列數，除了百分比的形式之外，還支援各種單位的組合形式，比如 grid-template-columns: 100px 20% 1em 1vw 20%;
但是有個repeate函式可以簡化相同的值，比如grid-template-columns: repeat（5， 20%）表示5個20%的寬度，和例子中的意義完全相同。
fr用於等分剩餘空間，它的大小是將該屬性上的所有可計算的值（包括各種單位，百分比）除去後，剩餘空間的大小。
推薦使用fr。它也會自動計算除了grid-gap之外其餘的部分。
如 grid-template-columns：100px 1fr 2fr repeat(2, 20%)。同樣的5列布局，其中的 1fr 表示寬度為總寬度減去左邊的100px和右側兩列的20%之後剩餘的部分除以三。即第二列的寬度是將會是第三列的一半。
grid-template-rows
屬性值和grid-template-columns的屬性值完全一樣。
grid-template
是grid-template-rows和grid-template-columns的縮寫形式，屬性值的寫法為
grid-template: 1fr 50px/1fr 4fr; //為行數/列數的形式，
該程式碼表示兩行兩列的佈局，第一行的高度為底行的50px確定之後剩下的高度。第一列的寬度為將該容器分為五等分，第一列佔據一份，第二列佔據四份。
grid-gap
可以取一或兩個值，表示行列之間的間隙。
 

grid-template-areas
通過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。重複網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網格單元。這個語法本身可視作網格的視覺化結構。
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;

    <div class='container'>
        <div class='child'></div>
    </div>
    <style>
    .container 
 
{
        display: grid;
        width: 580px;
        height: 580px;
        grid-gap: 3px;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(5, 1fr);
        background-color: blanchedalmond;
    }
    .child {
        grid-column-start: 6;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 5;
        background: url(./babar.png);
        background-size: 116px 116px;
        order：1；
    }

grid-row: 1/ 5;
grid-column: 6/ 3;
或者
grid-row: 1/ span 4; // 橫向第一個網格線開始，以下的4個網格軌道
grid-column: 3/span 3; // 豎向第三條網格線開始，以後的3個網格軌道
甚至簡寫成這樣
grid-area: 1/3/ span 4/span 3; 

grid-auto-flow:
row：告訴自動佈局演算法依次填充每行，根據需要新增新行
column：告訴自動佈局演算法依次填入每列，根據需要新增新列
dense：告訴自動佈局演算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺

justify-items
沿著 行軸線(row axis) 對齊 網格項(grid items) 內的內容
align-items
沿著 列軸線(row axis) 對齊 網格項(grid items) 內的內容
grid-auto-columns:
隱式網格的寬度
grid-auto-rows:
隱式網格的高度
網格項
網格項表示網格內部的直接子元素，不包括子元素的子元素。
常用屬性：
grid-column-start: 列網格線 開始，
grid-column-end: 列網格線 結束
grid-column: start/end | start/span count
order: 與z-index的屬性相同，表示層疊的位置。

grid-area: 網格名，在使用grid-template-areas時比較有用。

justify-self: 單個網格項在行軸線的對齊方式

align-self: 單個網格項在列軸線的對齊方式
————————————————
版權宣告：本文為CSDN博主「畫一生情入顏容」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/csdn_zsdf/article/details/81630446