【CSS】Grid 佈局（一）
Grid 與 Flex
Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。
Flex 佈局是軸線佈局，只能指定"專案"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。
基本概念
- 容器和專案
採用網格佈局的區域稱之為容器【container】，內部採用網格定位的區域稱之為專案【item】。
<div class="contniner"> <div class="item"> <p>item1</p> </div> <div class="item"> <p>item2</p> </div> <div class="item"> <p>item3</p> </div> </div>
注意： 專案(item)只能是容器子元素，Grid佈局只針對專案生效。
-
行和列
容器中水平區域稱之為行【row】，垂直區域稱之為列【column】
-
單元格
行和列的交叉區域，稱為"單元格"（cell）。
正常情況下，n行和m列會產生(n*m)個單元格。比如，3行3列會產生9個單元格。
4.網格線
劃分網格的線，稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。
正常情況下，n行有n + 1根水平網格線，m列有m + 1根垂直網格線，比如三行就有四根水平網格線。
容器屬性
1.display 屬性
div{
display:grid;
}
預設情況下容器都是塊級元素，但是也可以設定未行內元素
div{
display:inline-grid;
}
注意： 使用grid佈局，容器子元素專案(item) 的floot、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。
- grid-template-columns 和 grid-template-rows 屬性
容器指定了網格佈局後，劃分行和列， grid-template-rows劃定每一行行高， grid-template-columns 劃分每一列列寬。
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } /* 指定了一個三行三列的網格，列寬和行高都是100px(除了絕對單位也可以使用百分比) */
(1) repeat
有時候寫重複值很麻煩，尤其網格很多時。這時，可以使用repeat()函式，簡化重複的值。
.container {
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100)px;
/* 重複某種模式 生成6列 */
grid-template-columns: repeat(3,100px 150px 180px);
}
repeat 接受兩個引數，第一個引數是重複的次數（上例是3），第二個引數是所要重複的值或模式
(2) auto-fill 關鍵字
有時，單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納儘可能多的單元格，這時可以使用 auto-fill 關鍵字表示自動填充。
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
(3) fr 關鍵字
為了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。
如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。
如果兩列的寬度分別未2fr和1fr, 就表示後者是前者的一半。
.container {
display: grid;
grid-template-columns: 150px 1fr 2rf;
}
(4) minmax()
表示一個長度範圍 在範圍內均可。 接受兩個引數 最小值&最大值
.container {
display: grid;
grid-template-columns: 150px 150px minmax(1rf,150px);
}
(5) auto 關鍵字
表示由瀏覽器自己決定長度。
.container {
display: grid;
grid-template-columns: 150px auto 150px;
}
(6) 網格線的名稱
grid-template-columns屬性和 grid-template-rows屬性裡面，還可以使用方括號，指定每一根網格線的名字，方便以後的引用。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/* 網格佈局允許同一根線有多個名字，比如[fifth-line row-5]。 */
}