前言
最近了解到一种新的布局：grid布局（网格布局），grid并不是最近才看到的，以前在设置display的时候，会在属性值列表中看到，但却没有给过太多关注。一次偶然机会听到：对于九宫格布局的实现，grid布局会比flex布局实现起来更方便，作为flex深度使用者，这句话无疑引起了我强烈的欲望，想要对grid一探究竟。在了解后，才觉得grid功能真的很强大，目前只学习了个皮毛，在这里做个简单的记录。
grid与flex的区别
- 概念上
- flex：又叫弹性布局，是一维布局；
- grid：又叫网格布局，是二维布局；
- 使用上
- flex：实现九宫格的效果，在某些场景下需要做特殊处理，可以参考我之前的笔记（flex 布局下 space-between/space-around 的使用 ）；
- grid：可以很容易的实现，而不需要做特殊处理；
- 浏览器兼容性上
- flex：IE10更早的版本不支持，IE10使用
-ms-前缀，UC浏览器使用-webkit-前缀； - gird：IE10更早的版本不支持，IE10到 Edge15 的版本，使用的是早期规范，可以使用
-ms属性实现简单的网格布局，呈现效果会与现行的规范有一定的差异。可以通过@support (display: grid)做样式的兼容处理，对于支持grid的浏览器，使用网格布局；对于不支持的旧浏览器，使用流布局。
grid 实现九宫格
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 20px;
}
- grid-template-columns: 设置网格的列轨道。repeat表示重复，第一个参数是重复的次数，第二个参数是要重复的内容，fr是等分。repeat(3, 1fr)即设置页面为3列，3列均分当前页面宽度。
- grid-auto-rows: 设置行高。
- gap: 设置行和列间距。
相比flex，grid的设置是不是更加简洁！