通过grid实现如下布局：
以前只是听说过grid布局，从没用过，今天尝试了一下，发现二维布局用grid还是挺方便的。主要需要了解这几个属性。
父容器盒子：
// 这是设置布局，默认grid为块级元素，使用inline-grid设置行级
display: grid 或者 inline-grid
// 这是设置网格结构的列数，有几列传几个，如果都重复的话可以用repeat函数取代，另外新增fr单位
// 可以像flex一样自适应分配剩余空间，minmax(50px,auto)表示自适应补充剩余空间，但是最小保证50px
grid-template-columns: 100px 100px 100px 或者 repeat(3, 100px) 或者 repeat(3, 1fr) 或者
100px 100px minmax(50px,auto);
// 行数同上
grid-template-rows: 100px 100px 100px
// 设置行列间距的，grid-gap为前两者简写
grid-row-gap grid-coloum-gap grid-gap:20px 10px;
子容器盒子：主要是设置二维位置
// 直接传1的话默认是从第一列开始占1列
// 传1/3 代表从第一列到第三列前，不包括第三列
// 传1/span2 代表从第一列开始往后占据2列
grid-column：1 或者 1 / 3 或者 1 / span 2
了解这几个属性能满足大部分的布局场景了。 上述图片实现：codepen.io/gpingfeng/p…
