gird网格布局

前言

闲着没事，随便写点小东西，这次稍微讲一下使用到的ui样式 gird 网格布局

flex布局

现实中我们如果又碰到网格样式的布局，一般会直接使用万能的flex布局，这类网格布局对于flex老手来说，也是手拿把掐，轻轻松松了，实际上使用 gird 会更简单

这里我们先介绍一下 flex 的常规实现方式

我们使用flex的时候，一般都是使用父节点控制整体，子节点调整间距, 宽度，以实现网格状效果

display: flex;
justify-content: space-evenly; // space-around
flex-wrap: wrap;

要实现固定列的，可以自己设置子节点宽度，控制子节点的间距，实现网格状的效果，配合 flex-wrap 实现换行效果，一般为了居左，则可能不使用 justify-content 属性，直接控制子节点间距

可以看到上面虽然实现起来不难，但是还需要计算宽高，甚至根据情况用不用 justify-content，还是略微费点心的

gird布局

一旦使用了 grid，发现这个太省事了，根本不用考虑那么多，直接一件梭哈，根本不用考虑子节点

display: gird;
//几个表示有几列，fr是百分比分配和flexgrow属性类似，如果是写死则对应的列就固定大小了
gird-template-columns: 1fr 1fr 1fr;
gap: 10px; //网格水平和垂直方向的间距，下面两个则是对应水平和垂直方向上的间距
row-gap: 10px;
columns-gap: 10px;

最后

有这么简单的使用方式，还费心费力写那么多代码干啥，留点时间思考人生不好么，哈哈，这期很简单，就说到这里😂