grid佈局基本概念

網格容器

• 經過在元素上聲明display:grid或display: inline-grid來建立一個網格容器，設定後該元素的全部直系子元素將成爲網格元素

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
</div>
.wrapper {
    display: grid;
}
複製代碼

網格軌道

• 咱們經過grid-template-columns和grid-template-rows屬性來定義網格中的列和行；一個網格軌道就是網格中任意兩條線之間的空間。
• grid-template-columns: 定義網格中的列
• grid-template-rows: 定義網格中行

fr單位

• 網格引入了新的長度單位fr; fr單位表明網格容器中可用空間的一部分，軌道會隨着可用空間增加和收縮。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
複製代碼

使用repeat()

• 有着多軌道的大型網格可以使用repeat() 標記來重複部分或整個軌道列表

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
//也可寫成
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

複製代碼

• repeat語句能夠用於重複軌道列表中的一部分

//起始軌道爲100像素，接着重複了4個1fr的軌道，最後再添加了一個100像素的軌道
.wraper {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr) 100px;
}

複製代碼

• repeat語句能夠傳入一個軌道列表，所以你能夠用它來建立一個多軌道模式的重複軌道列表。

//網格將有共計10個軌道，爲1個1fr軌道後面跟着1個2fr軌道，該模式重複5次。
.wrapper {
    display: grid;
    grid-template-columns: repeat(5,1fr,2fr);
}

複製代碼

隱式和顯式網格

• 使用grid-template-columns和grid-template-rows屬於定義的是顯示網格的行和列；
• 若是你在網格定義以外又放了一些東西，或者由於內容的數量而須要的更多網格軌道的時候，網格將會在隱式網格中建立行和列。按照默認，這些軌道將自動定義尺寸，因此會根據它裏面的內容改變尺寸。
• 在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。

//用 grid-auto-rows 屬性來確保在隱式網格中建立的軌道是200像素高
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
}
複製代碼

• 定義的顯示網格尺寸優先級大於定義的隱式網格尺寸

//軌道高250px
.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4, 250px); //優先級更高
    grid-auto-rows: 200px;
}
複製代碼

軌道大小和minmax()

• 用minmax()函數能夠給網格一個最小的尺寸，確保他們能擴大到容納他裏面添加的內容，同時也不限定死最大高度，網格能夠隨着內容延伸。

//自動建立的行高將會是最小100像素，最大爲auto。用auto意味着行的尺寸將會根據內容的大小來自動變換：根據本行中最高的單元，把空間擴展到足夠容納該單元。
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px,auto);
}
複製代碼

網格線

• 當咱們定義網格時，咱們定義的是網格軌道，而不是網格線；grid會爲咱們建立編號的網格線來讓咱們定位每個網格元素，例以下面這個三列兩行網格中就擁有四條縱向的網格線
• 網格線的編號順序取決於文章的書寫模式，在從左至右書寫的語言中，編號爲 1 的網格線位於最左邊。

跨軌道放置網格元素

• grid-column-start: 網格列線開始編號
• grid-column-end: 網格列線結束編號
• grid-row-start: 網格行線開始編號
• grid-row-end: 網格行線結束編號

網格單元

• 一個網格單元是在一個網格元素中最小的單位， 從概念上來說其實它和表格的一個單元格很像

網格區域

• 網格元素能夠向行或者列的方向擴展一個或多個單元，而且會建立一個網格區域；網格區域的形狀應該是一個矩形，也就是說你不可能建立出一個相似於「L」形的網格區域

網格間距

• 在兩個網格單元之間的 網格橫向間距 或 網格縱向間距 可以使用grid-column-gap和grid-row-gap屬性來建立;
• 間距只出如今網格軌道與軌道之間，它們並不會出如今網格容器的四周;
• 間距使用的空間會在 使用彈性長度fr的軌道的空間計算前就被留出來，間距的尺寸定義行爲和普通軌道一致，但不一樣的是你不能向其中插入任何內容。從以基線定位的角度來講，間距就像一條很寬的基線。

網格間距縮寫

• 這兩個屬性能夠用grid-gap簡寫。若是你只給出一個值，那這個值會同時應用於行間距和列間距。若是你給了兩個值，第一個會被用於grid-row-gap，第二個則會被用於grid-column-gap
• grid-gap: 10px 20px:先是行間距後是列間距

.wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
     grid-gap: 1em 20px;
}
複製代碼

嵌套網格

• 一個網格元素能夠也成爲一個網格容器，嵌套網格和他的父級並無關係
• 當元素不是網格容器的直接子級元素時，它們不會參與到網格佈局中，並顯示爲正常的文檔流

使用z-index控制層級

• 多個網格項目能夠佔用同一個網格單位，使用z-index屬性控制重疊的順序,z-index越大層級越高

網格佈局結合彈性佈局

• 當抉擇該用網格仍是彈性盒時，你能夠問本身一個簡單的問題
  • 我只須要按行或者列控制佈局？那就用彈性盒子
  • 我須要同時按行和列控制佈局？那就用網格