今天在做实验的时候，看到需求是使用网格布局实现。回顾之前的项目基本上都是使用弹性布局，所以对网格布局比较陌生。于是查找资料并进行系统的学习，特此进行总结。
一、定义
网格布局，顾名思义，像是网格一样将页面中的元素进行排列组合。专业点来讲，就是一组相交的水平线和垂直线构成了网格的列和行。我们根据业务需求将网格元素放在这些位置上。由于之前学习过弹性布局，刚好可以拿来进行对比学习。
二、网格布局VS弹性布局
根据资料显示，弹性布局是为一维布局服务的，空间分布只在行内进行；而网格布局是为二维布局服务的，空间分布在行和列。
说的抽象一点就是，网格布局可以控制坐标轴中的x轴和y轴，而弹性布局只能控制一个坐标轴。
三、网格容器和网格项目
网格里面的区域，分为“网格容器”（container）和“网格项目”（item）
因为网格容器和网格项目会有不同的属性，所以要区分清楚。
例如，这段代码中，container就是最外层的容器，而item就是网格项目。
<div id="container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
四、容器属性和项目属性
区分完容器和项目我们来看一下容器属性和项目属性。
以下是我总结的关于容器属性和项目属性的表格。
行（rows）和列（columns）的使用方法基本一致，所以我将他们合并在一起。
以上属性都是比较常用的，只要多动手尝试便可以理解了。
具体使用可以看阮一峰老师的文章：www.ruanyifeng.com/blog/2019/0…
以及MDN的这篇：developer.mozilla.org/zh-CN/docs/…
