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 简写：