grid布局： 基於網格的2維布局方法
1：display: grid | inline-grid | subgrid
作用：啟用網格grid容器

grid：定義一個塊級的網格容器
inline-grid：定義一個內聯的網格容器
subgrid：定義一個繼承其父級網格容器的行和列的大小的網格容器，它是其父級網格容器的一個子項。

2:網格系統的屬性
（1）：grid-template-columns/grid-template-rows
grid-template-columns 列寬(值得個數決定了列數)
grid-template-rows 行高（值得個數決定了行數）
設置方法：

a:
(創建三行三列的網格結構，值也可以設置auto自動分配剩余)
grid-template-columns:33.33% 33.33% 33.33%
grid-template-rows:33.33% 33.33% 33.33%
 

b:
repeat(3,33.33%)方法設置相同的值
grid-template-columns:repeat(3,33.33%)
grid-template-rows:repeat(3,33.33%)

c:
可以添加名稱：
grid-template-columns:[line1] 25% [line2] auto [line3] 25% [line4]
grid-template-rows:[row1] 25% [row2] auto [row3] 25% [row4]

如圖

d:
1fr 每個網格所占份數
grid-template-columns:1fr 1fr 1fr
grid-template-rows:1fr 1fr 1fr
 

（2）：grid-template-areas
作用：grid-template-areas可以配合grid-area定義一個顯式的網格區域。grid-template-areas定義網格區域，然後使用grid-area調用聲明好的網格區域名稱來放置對應的網格項目。 .代表一個空的網格單元
例子：

<section>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</section>


section{
    display:grid;
    
    
    background:pink;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:(3,1fr);
    grid-template-areas: "header header header header"
    "nav . . aside"
    "footer footer footer footer"
}


.wrap1{
    grid-area: header;
    background:#f00;
}
.wrap2{
    grid-area: nav;
    background:#dd0;
}
.wrap3{
    grid-area: aside;
    background:#0dd;
}
.wrap4{
    grid-area: footer;
    background:#000;
}
 

效果如圖：

（3）：grid-column-gap/grid-row-gap/grid-gap
作用：指定網格線的大小，也可以說是網格子項之間的間距
grid-gap是grid-column-gap和grid-row-gap的簡稱

eg:

grid-gap:10px

圖示：

（4）：justify-items/align-items

屬性值：
start：內容和網格區域的左邊對齊
end：內容和網格區域的右邊對齊
center：內容和網格區域的中間對齊
stretch：填充整個網格區域的寬度（默認值）

justify-items：讓網格子項的內容和列軸對齊
align-items：讓網格子項的內容和行軸對齊，這個值對容器裏面的所有網格子項都有用

eg:

justify-items: center;
align-items:center;

圖示：

（4）justify-content/align-content
屬性值

start:左對齊
end：右對齊
center：居中對齊
stretch：填充網格容器
space-around：在每個網格子項中間放置均等的空間，在始末兩端只有一半大小
space-between：兩邊對齊，在每個網格子項中間放置均等的空間，在始末兩端沒有空間
space-evenly：網格間隔相等，包括始末兩端

說明：當網格子項非彈性單位，例如每個格子的寬是px單位，控制網格子項在網格系統裏面的對齊方式。

justify-content 列網格線對齊

align-content 行網格線對齊

（5）grid-auto-columns/grid-auto-rows
作用：設置隱式網格軌道的列寬和行高。

隱式網格：當你定位網格項超出網格容器範圍時，將自動創建隱式網格軌道。
怎麽創建隱式網格：接觸兩個新屬性（放在網格元素上） 》
grid-column / grid-row

eg：
grid-column ：2/3 把當前的元素放在第2列網格線開始到第三列網格線之間。
gird-row：1/2 把當前元素放在第1行網格線開始到第2行網格線之間。

代碼示例：

<section>
    <div >1</div>
    <div >2</div>
    <div >3</div>
</section>

section{
    
    
    background:pink;
    display:grid;
}
div{
    border:1px solid #d00;
}
.con1{
    grid-column: 2/3;
    grid-row: 2/3
}
.con2{
    grid-column: 6/7;
    grid-row: 1/2;
}
.con3{
    grid-column: 6/7;
    grid-row:2/3;
}

註：以上案例則創建了一個2行6列的網格系統。分別把網格內的元素放在網格不同的位置。
（位置：類似幾行幾列 grid-column控制放在第幾列，grid-row控制放在第幾行）

grid-auto-columns/grid-auto-rows則是控制自動創建出來的網格的列寬和行高。
eg:

grid-auto-columns: 60px;
grid-auto-rows:100px;

（5）grid-auto-flow:
作用：當網格系統中沒有設置網格內的元素固定在某個位置的時候，grid-auto-flow可以自動去排列位置：
屬性值：

row  按照行橫向進行排列
column 按照列縱向進行排列
row dense 在行內按照元素的先後順序進行排列
column dense  在列內按照元素的先後順序排列

eg:

<section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
</section>

div:nth-child(2){
        grid-column:4/5;
        grid-row:2/3;
}

註:給第2個元素設置了位置。其他元素的排列按照grid-auto-flow設置進行排列。

（6）：justify-self/align-self

和justify-items/align-items的作用一樣。區別：justify-items/align-items控制的是整個網格系統內的所用元素的對齊方式。而justify-self/align-self則是添加在網格系統中的某一個元素上面，僅對當前的元素起作用。

grid網格系統布局