CSS中优秀的响应布局Grid

网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。n行n列，之前需要通过css框架等来完成，现在浏览器属性支持。写起来理解起来也很方便。

基本使用

设置display

.container{
    display: grid;
    grid-template-columns: 100px 100px 100px; //列
    grid-template-rows: 100px 100px ; //行
  }

响应单位fr

grid-template-columns 和 grid-template-rows设置的值可以是固定值，也可以是百分比。这里还有一种单位为fr，是fraction的简写。

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px ;
  }

这里的栅格布局将容器等分为三个等份fraction，每列占据一个 fraction 单位。
如果将这个修改成：grid-template-columns: 1fr 2fr 1fr; 会将容器等分我4份，而第二列占据两份。以此类推。使用grid 三栏布局很好实现。

网格间距

网格的间距就是行列之间的间距。
grid-gap:10px 设置列和行之间的间距
也可以像下边一样分开设置

   grid-column-gap: 10px; //设置列之间的间距
   grid-row-gap: 1em; //设置行之间的间距

子网格

网格规范中有一个叫做 子网格 的特性。它能让我们在父级网格元素的轨道定义中就能定义一个嵌套网格。 子网格还并未在任何浏览器中实现，并且随时有可能从规范中移除。
嵌套网格将会使用父级网格元素中的轨道定义来排列它其中的网格元素。
需要指出的是嵌套网格有同时有两个单位 —— 行和列。隐式子网格的概念是没有的，这意味着你需要确保父级网格元素为了容纳所有的子网格元素需要包含足够的行与列的轨道。

.container {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: subgrid;
}

高级响应

上面列子并没有给出我们想要的响应性，因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点，你必须学习如下三个概念：

repeat()

repeat()函数。是一个强大的指定列和行的方法。repeat()第一个参数为行或者列的数量。第二个参数为宽度。这里的宽度可以为 具体的px值，百分比，或者fraction单位。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);  //还可以是百分比 或者 fr 
    grid-template-rows: repeat(2, 50px);
}

这里还可以混合使用

.container{
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;  
}

这里将容器首尾设置了20px的宽度，剩余部分等分为6份并且按照响应式布局。

.container{
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

这个是重复分配一个1fr 一个2fr 重复5次，栅格一共分为十份。效果如下图。

auto-fit

auto-fit为自适应数量，使用到repeat函数中，可以根据屏幕大小自适应，

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。

minmax

这里将 100px 替换为 minmax(100px, 1fr)，代码如下：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

效果完美。minmax()函数定义的范围大于或等于 min， 小于或等于 max。因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。缩放空间的时候，右侧没有了留白。

添加图片

<div><img src="img/forest.jpg"/></div>

将object-fit 设置成cover，这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

兼容性

要支持低版本的浏览器的要注意啦。

参考文件
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
https://mp.weixin.qq.com/s/i8EoPX65VJOZVVtqsadL8A