容器：gird container開啟grid布局的元素
項目：grid items容器里面的子元素，不包括后代元素
顯式網格（單元格）：通過grid-template-columns和grid-template-rows指定的網格，注意項目不等于單元格,可以通過屬性設置某個項目占據多個單元格
隱式網格：超出指定網格之外的，比如指定兩行兩列，那么第五個元素就是隱式網格
網格區域:1個或者多個單元格組成的矩形區域

一、容器屬性

1.grid-auto-flow

控制著自動布局算法怎樣運作，精確指定在網格中被自動布局的元素怎樣排列。

• row(默認值)
  從上到下，從左到右的順序依次排列

• column
  從左到右，從上到下的順序依次排列

• dense
  一般都搭配上面兩個屬性使用，如果后面出現了稍小的元素，則會試圖去填充網格中前面留下的空白。這樣做會填上稍大元素留下的空白，但同時也可能導致原來出現的次序被打亂。

2. grid-template-columns和grid-template-rows

定義每一行和每一列的大小

<style>width: 600px;height: 600px;background-color: red;display: grid; //開啟網格布局grid-auto-flow: column;// 具體值// grid-template-columns: 100px 100px;// grid-template-rows: 100px 100px;// 按比例計算// grid-template-columns: 1fr 1fr;// grid-template-rows: 1fr 1fr;// 值的簡便寫法，等同于1fr 1fr 1fr// grid-template-columns: repeat(3, 1fr);// grid-template-rows: repeat(3, 1fr);// 屬性的縮寫，前面是行，后面是列grid-template: repeat(3, 1fr) / repeat(3, 1fr);// 最大最小值grid-template-columns: repeat(3, minmax(100px, 1fr));grid-template-rows: repeat(3, minmax(100px, 1fr));//給行線和列線命名，方便后續使用，但是感覺很雞肋，用處不大，因為這個名字不會顯示在F12的審查元素里面//反而變得不直觀了grid-template-columns: [c1-start]1fr [c1-end c2-start] 1fr [c2-end c3-start] 1fr [c3-end];grid-template-rows: [r1-start]1fr [r1-end r2-start] 1fr [r2-end r3-start] 1fr [r3-end];
</style>

3.grid-auto-rows和grid-auto-columns

設置隱式網格生成行和列的屬性

 <style>grid-auto-rows: 100px;grid-auto-columns: 100px;</style>

4.grid-template-areas

<style>
.container{width: 400px;height: 400px;background-color: red;display: grid; //開啟網格布局grid-auto-flow: row;grid-template: repeat(3, 1fr) / repeat(3, 1fr);//非常形象的把整個容器劃分出來了grid-template-areas:"header header header""left main right""footer footer footer";
}
.item1 {background-color: blue;grid-area: header;}.item2 {background-color: yellow;grid-area: left;}.item3 {background-color: green;grid-area: main;}.item4 {background-color: pink;grid-area: right;}.item5 {background-color: rgb(171, 90, 104);grid-area: footer;}
</style>

5.容器內單元格對齊方式

<style>width: 400px;height: 400px;background-color: red;display: grid; //開啟網格布局grid-auto-flow: row;/*水平對齊方式start end center space-evenly space-between space-around*/justify-content: start;/*垂直對齊方式，可選值有start end center space-evenly space-between space-around*/align-content: start;/*簡寫方式  第一個值是垂直對齊方式  第二個值是水平對齊方式*/place-content: space-around end;</style>

6.設置單元格內項目的對齊方式

注意區分上面對齊方式的區別

<style>width: 400px;height: 400px;background-color: red;display: grid; //開啟網格布局grid-auto-flow: row;/*水平對齊方式start end center */justify-items: center;/*垂直對齊方式，可選值有start end center */align-items: center;: start;/*簡寫*/place-items: center center;</style>

二、項目屬性

1.grid-row-start、grid-row-end、grid-row-start、grid-row-end

顯式的指定項目占據的開始、結束單元格

<style>//行開始編號grid-row-start: 1;//列開始編號grid-column-start: 1;//行結束編號grid-row-end: 3;//列結束編號grid-column-end: 3;grid-row: 1 / 3;  //簡寫，第一個參數是開始位置，第二個參數是結束位置grid-column: 1 / 3;grid-row: 1 / span 2;  //span表示跨幾行，偏移量，推薦使用這種方式，后續更改位置，只需要修改開始位置grid-column: 1 / span 2;grid-row: span 2; //如果從當前位置開始偏移,開始位置可以不寫grid-column: span 2;grid-row: r1-start / r2-end;  //使用上面自定義命名grid-column: c1-start / c2-end;
</style>

2.grid-area

<style>grid-area: 1 / 1 / 3 / 3; //開始行 / 開始列 / 結束行 / 結束列
</style>