H5代碼：
第一個屬性： 設置三行三列的 Grid 布局 grid-template-rows 和 grid-template-columns ，
里面有幾個屬性就有幾行幾列。。。。大小自己設置。。。。。：
如果大小為auto ,那么就是占滿剩余位置：
fr 單位
它類似於 % ，但不是根據父元素來平分的，是根據剩余空間平分，，，，
如果取值可以為0.xfr 那么！ 會以1rf為標准划分，，1rf相當於 100% ，0.x 相當於 x%
HTML 代碼：
·grid-template-areas屬性：
它是合並單元格的屬性，它用在grid布局，它的用法很奇葩也很方便：命名法：
記住！ 我測試過 不能亂命名，我試過有橫着又豎着來 是不行的！
·grid-area 屬性：
它是合並的單元格的屬性，它用在grid的子項里面，直接使用 grid-template-areas 命名中的名字即可：
配合上面的grid-template-area 的布局效果如下：
特殊例子： 代碼和效果如下：
3
grid-template 簡寫：
網格間隙 和 簡寫
grid-row-gap 設置 行間隙，直接設置值即可。
grid-column-gap 設置 列間隙 直接設置值即可。
但這兩個過時了 被橫線了，還可以用的。
不過是的是：
row-gap 設置行的間隙，column-gap 設置列的間隙。
效果和上面的一樣，直接設置即可。
和他相比 少了 grid 這個前綴而已。
效果一樣 我就不演示了。
間隙簡寫
簡寫的話 直接寫 grid-gap，，，2個值，第一個行 第二個列的間隙：
效果也是一樣的 不演示了，瀏覽器可以看到其實就是設置了 row-gap 和 column-gap 2個屬性。
！！！其實 row-gap 和 column-gap 在flex布局也是可以用的！可能這就是為什么 grid-xxx-gap過時的原 因吧.
網格內容對齊方式 和 簡寫
圖片可以看到，子項設置小了，格子還是那么大，但是子項默認是左上對齊。
記住啊 ，justify-items 別和 flex 的 justify-content弄反了，flex也是有align-items的，但是人家是分方向的。。。
網格內容對齊方式簡寫
可以看到，第一個值是垂直 ，第二個值是水平，在瀏覽器也可以看得啊。
網格對齊方式 和 簡寫 【注意是網格對齊方式（網格小於容器的時候）】
我們可以設它的網格對齊方式：
哎呀 這不是flex的嘛 所以用多了你就熟了！
網格對齊方式 簡寫：
在瀏覽器也可以看到的！
注意！ 別弄混 布局內容的排列 和 布局整體的排列！
復雜是復雜 但是真的方便！ 萬能死我了...
基於“線”的元素放置
首先 grid 是有名稱 和 標識的，名稱是自定義，但是標識就是"線"了，橫向和縱向的線：
現在設置div1位置，即屬性是用在子項中的：
grid-row-start ： 設置元素網格【水平線】的位置從哪里開始
grid-row-end ： 設置元素網格【水平線】的位置從哪里結束
grid-column-start : 設置原始網格【垂直線】的位置從哪里開始
grid-column-end : 設置原始網格【垂直線】的位置從哪里開始
它們4個屬性的默認值都是auto，具體自己測試【配合其他子項】
下面是個例子，自己腦補即可：
不僅可以用線，還有個值是 span x，說明要占x個格子：
但是這種就無法定位了，但是你水平/垂直自定義配置即可：
例：
其實用格子的話 用start即可 end 就不用了，上面就是橫着占2格子，豎着占2格子，
例2：
可以看到 橫線沾滿2格子，豎線呢就是從2開始 到3結束，那么就是1個格子。這就破解了格子不能定位的問題了。
自定義"線"名：
自己腦部吧 這個很容易。
簡寫：grid-column 和 grid-row：
grid-column 和 grid-row 各有2值，用 / 分開，第一個是開始 第二個是結束“：
自己看看即可。不僅如此 grid-area 也是可以簡寫的，我給出對應代碼 自己套進去 詳細我就不說了：
justify-self 和 align-self 講解：
這兩屬性 都是設置gaid子布局內的內容【網格內容】 的，當內容寬高小於grid子布局才有效，且是針對自己而設置的！！！
給個例子 自己腦補：
repeat() 和 minmax() 簡寫 和 自適應
repeat 這個可以設置x個相同不格子，其實就是 grid-temp-rows的值的簡寫，例：
也可以這樣：
maxmin() 這個是設置最大和最小的寬/高，可以配合repeat一起用：
可以看到 現在是父組件沒設置寬高，三個格子的話，中間那個格子是1fr 自適應，但如果分辨率小，極限的話 1fr的格子 就是會被壓扁。
那么就可以用minmax設置他的最小了，超過最小不會被壓縮：
2個值，第一個是最小值，第二個是最大值：
e.mmm 自己腦補即可。
auto-fill : 這個屬性可以配合repeat一起用，意思是根據寬度設置X個格子，例：
自己去發掘，grid布局就到這里了。。。。。。。。。。。。。。。。。。
其實用疊加很容易做下面這種效果：
補充：
grid-auto-rows 和 grid-auto-columns 這2個是設置 “沒 grid-template-rows 和 grid-template-columns” 時的 “隱式"格子的 寬高，
具體貌似是返回來的： rows設置的是高度 column設置的是寬度：
補充2：
grid-auto-flow grid-auto-flow 屬性控制着自動布局算法怎樣運作，精確指定在網格中被自動布局的元素怎樣排列。