grid布局

1、使用display:grid/display:inline-grid将元素声明为网格容器。使用display:grid声明，元素为块级元素。使用display:inline-grid声明，元素为行内块元素。

2、通过grid-template-colums设置容器的每列的宽度，并指定列数。

 通过repeat()函数可以将重复的列简写，设置容器为三列，每列的宽度为200。

3、通过grid-template-rows设置容器的每行的高度，并指定行数。

同理repeat函数也可使用。

4、通过grid-tap设置网格之间的间隙大小。上下左右间距20。

5、grid-template-columns: repeat(auto-fill, 200px)表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

6、添加网格单位fr，可实现左边固定右边自适应布局。根据宽度大小，等比分布大小。表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

7、minmax函数可设置最小最大宽度。最小300，最大2/4。

8、grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成。一般这个属性跟网格元素的 grid-area 一起使用。 grid-area 属性指定项目放在哪一个区域。.表示空元素。

grid布局优点：使布局更简洁。可以将多个元素放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。

缺点：兼容性有待提高，IE10以下不支持。