:first-of-type——类似于:first-child，但不是根据在全部子元素中的位置查找元
素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。

gap简写是行列间距宽度是同一个值吧

是不是你的container大小设置太小了，justify-content是在包含了网格项之后还有剩余空间时的网格项对齐方式。

不然也有可能是浏览器不支持？

----萌新如此回答

很明显，不是的，是每个div的gird-area的取值

哈哈哈 ，  需要多练习。 光靠记  走不长的。  名字跟名字对应关系。  最简单的方法自己动手练习， 很简单的。

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html   看这个，要是学不会算我输。

好像是这样。

但这样和用2个flex 也没什么区别了，用网格好像也体现不出什么优势，还更复杂了

你想复杂了，页面都是一个人搞定的，很少遇到协同的。

3333

333

333

推荐一个网站,jq22.com,可以去看看,遇到合适的可以直接copy代码,其他的可以自己试试修改,反正代码要多写,熟练就好了

网格布局 CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

可以的

写成一行程序没问题，程序正常执行

    grid-template-areas "title title header header" "time time swiper swiper" "block1 block2 swiper swiper" "block3 block4 swiper swiper" "block5 block6 swiper swiper" "block7 block7 video info"

但是格式很难看，失去了所见既布局的意思，多行的话，代码没有执行   

 grid-template-areas "title title header header"

                                   "time time swiper swiper"

                                   "block1 block2 swiper swiper"

                                   "block3 block4 swiper swiper"

                                   "block5 block6 swiper swiper"

                                   "block7 block7 video info"