guid栅格响应式布局

在css3中，display新增了grid栅格属性，常用浏览器都已兼容，以前通过bootstrap实现，现在只需一行就可以实现，栽牛逼🐂🍺！！
通过dispaly可以实现常见三种布局：

• 常见三栏布局，每栏等宽自适应布局；
• 三栏布局，两边固定，中间自适应布局；
• 窗口自适应布局，能够根据窗口的大小适应多少列；

在了解grid布局之前，先得知道一下几个概念

1. 简单响应单位fr
   CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。例如：

grid-template-colums: 33.33% 33.33% 33.33%;
grid-template-colums: 1fr 1fr 1fr;

上面两种实现效果相同，可以看出，fr实现更加方便，将屏幕分为三块，每块等宽布局，但其并不是响应式布局；

2. repeat()
   如上面书写，如果有很多网格的时候就比较繁琐，这里我们可以通过repeat()方法替代上述书写方式，如下：

grid-template-colums: repeat(3, 300px);

可以看出，这样写并没有自适应布局，只是简单的有三列，右边有大量空白，别急，下面会解决；

3. minmax()
   minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值;
   因此，现在每列将至少为 300px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 300px。

<