grid網格布局，就是將網頁划分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局
如果把一個父級元素設置 display: grid 其中的子元素 會在控制台選中子元素 會看到 一個個虛線，這就是網格 如下圖所示
父元素設置
display: grid // 默認是塊級元素
display: inline-grid // 默認是行內塊元素
注意：設置為grid后，子元素的float, display:inline-block,display:table-cell 等設置都無效了
1. 行寬列寬
grid-template-columns: 定義列數，每一列的列寬；（一排有幾個div，每個div寬度是多少）
grid-template-columns: 100px 100px 100px; //代表有三列，每列是100px的寬度，也可以用百分比
grid-template-rows: 每一行的行高；（每行div的高度是多少）
grid-template-rows：100px 100px 100px; //從上至下，每行高度為100px，如果有第四行，未設置就是其自身高度
即：每一行的高度是一樣，每一列的寬度是一樣的，就像格子一樣，就是網格布局
多個值可以用 repeat 函數
grid-template-columns: 100px 100px 100px; // 簡寫方法 即重復3次 每行高度100px grid-template-columns：repeat(3,100px); // 也可以是不固定的重復模式 grid-template-columns:repeat(2,100px 80px); //重復兩次100px 80px 的模式，就是4列=== grid-template-columns：100px 80px 100px 80px;
repeat 第一個參數 重復幾次
注意: 后面如果是多個參數 第一個參數會重復 后邊所有參數的次數
2. 關鍵詞:
1) auto-fill:
如果容器大小不固定，網格大小固定，可以用關鍵詞自動填充
grid-template-columns:repeat(auto-fill,100px);//自動填充，每列100px寬度
2)fr(fraction):倍數，
如果有兩列，1fr 2fr，后者就是前者的兩倍
grid-template-columns:1fr 2fr;
grid-template-rows:50px 1fr 2fr;
如圖：第二列是第一列的2倍，填充整個容器的寬度
對於行高，1fr就是自身內容的高度，第一行是50px 第二行是18px 第三行2倍36px，因為沒有設置第四第五行，所以后面兩行都是自身高度18px。
3)minmax()
grid-template-columns:1fr 5fr minmax(100px,1fr);
解釋：第一列是1fr，第二列是5fr，第三列最小值是100px，最大值是1fr。
當1fr>=100px，比如容器是800px，那1fr就是114左右
第一列是1fr=800/7，第二列是5fr，第三列是1fr
當1fr<100px，比如容器是600px，則
第一列是1f=(600-100)/6 ，第二列是5fr，第三列是100px
4)auto
grid-template-columns:100px auto 100px;
3.網格線名稱
grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
指定每一根網格線的名字，方便以后引用。也可以給多個名字如：[c1,c1a]
4.間距
row-gap：行間距
column-gap：列間距
簡寫：gap:20px 2opx; ,row-gap和column-gap的簡寫形式，可以省略第二個值，瀏覽器默認第二個等於第一個值
grid-template-columns:repeat(3,1fr);
gap:20px;
grid-template:repeat(3,50px);
5.區域
grid-template-areas：指定區域，一個區域有單個或者多個單元格組成
grid-template-areas:'a b c' 'd e f';
6.放置順序
grid-auto-flow：網格默認的順序是先行后列，默認值是row
grid-auto-flow:column;
grid-template: repeat(3,100px 70px)/repeat(2,1fr); //先行設置，后列設置
7.單元格的水平垂直
justify-items:設置單元格內容的水平位置（左中右）
align-items：設置單元格內容的垂直位置（上中下）
- start：對齊單元格的起始邊緣。
- end：對齊單元格的結束邊緣。
- center：單元格內部居中。
- stretch：拉伸，占滿單元格的整個寬度（默認值）。
簡寫：place-items:align-items justify-itmel //先垂直位置，后水平位置
place-items:center; //單元格的內容相對於單元格水平垂直居中
8.整體內容的位置
同上，justify-content：整體內容在容器里面的水平位置
align-content：垂直位置
子元素屬性
設置子元素上的屬性
屬性說明
grid-area屬性還可用於為網格項指定名稱。然后，可以通過網格容器的grid-template-areas屬性引用命名網格項 。
grid-column-start屬性定義項目將從哪個列行開
grid-column-end 哪跟豎線結束
grid-row-start 哪跟橫線開始
grid-row-end 哪跟橫線結束
grid-row grid-row-start和grid-row-end的縮寫
grid-column grid-column-start和grid-column-end這兩個屬性的縮寫方式
grid-area grid-row和grid-column的縮寫
justify-self 設置單個子元素在其所在的小網格中的X軸排列方式
align-self 設置單個子元素在其所在的小網格中的Y軸排列方式
align-content 來設置整個網格在網格容器中的Y軸的排列方式
啊