grid 是乙個二維的布局方法 縱橫兩個方向同時存在
使用display：grid 形成網格布局，將乙個容器分成多分，網格可以進行多種組合
網格有行與列之分，水平的為行（row），垂直的為列（column）
網格的屬性：
應用在父容器的屬性：
grid-template-rows 該屬性定義行數的同時也定義了行寬
grid-template-columns 該屬性定義列的同時也定義列列的寬度
屬性值的單位既可以使用畫素作為單位，也可以使用百分比作為單位來定義網格，百分比所得出的最終寬度，基於父元素的容器的寬度。
還有乙個網格中的fr關鍵字，利用fr對網格進行均分
fr代表每行或者每列在整個寬度或者高度中佔多少 grid-template-rows :1fr 2fr;這代表在一行內，後乙個網格的寬度是前乙個網格的兩倍，grid-template-rows ：150px;1fr 2fr;這表示在一行內第乙個網格的寬度是150px，而剩下的兩個根據剩餘的空間，進行計算，第三個是第二個的兩倍
單獨的去設定每一行或者的列的寬度過於繁瑣，可以使用repeat（）來進行多個設定
grid-template-columns: repeat(4，1fr);
grid-template-rows: repeat(4,1fr);
使用grid-column-gap 和grid-row-gap去設定單元格之間的距離，這個布局不會將網格擠出父元素，只會壓縮單元格的寬度
grid-column-gap 設定列之間的寬度
grid-row-gap設定行之間的寬度
grid-gap 這是二者的復合寫法 有固定順序，先行後列
對網格進行行列的設定後，要對網格進行區域的劃分
使用grid-template-areas 對網格進行區域的劃分 劃分有乙個條件，便是，所有劃分的區域必須為矩形，否則不會生效
常用的方法
a1，a2等為乙個名稱，可以變定義，這意味著將四個區域分別進行命名，使用時，更加方便
子元素使用grid-area進行區域選擇
div 意思是，div佔據了a1的區域
align-items 定義了整體子項的垂直居中方式
justify-items 整體子項的水平居中方式
值有 start end center 預設值為stretch
justify-content 定義了網格整體的水平對齊方式
alitems-contents 定義了網格整體的垂直對齊方式
預設 stretch
start 在開頭對齊
center 在中間對齊
end 在尾部對齊
space-between 在兩端對齊，中間空出空間
space-around 內容中間空出的距離是兩端點空出的兩倍
spce-evenly 端點空出的距離與中間的距離相等
給子項新增的屬性：
以下四個屬性用於移動每乙個方塊
grid-column-start 水平方向上佔據的起始位置
grid-column-end 水平方向上佔據的結束位置
grid-row-start 垂直方向上佔據的起始位置
grid-row-end 垂直方向上的結束位置
注：只有在grid-column-end和grid-row-end中可以設定span操作
span去設定的不是結束的位置，而是個數
正常寫數字是位置，加上span是個數 是方塊的個數，佔據的了幾個方塊，
加上span之後，便不再是結束的位置，而是方塊的個數
grid-area 值不需要加引號 將子元素與網格所發分的區域對應起來
grid-area：水平開始 / 垂直開始 / 水平結束 /垂直結束
1.可以寫對應網格的名字
2.也可以寫對丁的線的數字
grid-row-start / grid-column-start / grid-row-end / grid-column-end
第二種遍試與上邊類似
第一種：
子項也有自身的對齊方式
align-self 垂直方向單個子項的對齊方式
justify-self 水平方向 單個子項的對齊方式
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...