最近刷视频的时候看到了 一个Grid布局中好玩的属性 gird-template-areas 用这个属性可以实现灵活的网格布局

如下图布局 用一般的Grid布局属性实现比较复杂

但是用gird-template-areas属性就可以简单实现

我们给外面的大盒子添加一个display : grid 属性 设置好我们想要的布局模版

最后给每个子元素的grid-area对应到grid-template-areas之中的位置即可!