2019下半年，该用用grid网格布局了！
前言
现在我们大家在实际的开发中，可能用的最多的就是flex布局，当然还有浮动和定位，除此之外，这两年一直听到网格布局是趋势，即grid布局，但是项目中没有太多的应用，所以特此总结一下，希望对大家也对我自己有帮助。

给大家一个直接的效果体验一下：

网格布局：就是一个容器内部由一个个的项目组成，是一个二维布局，接下来，我们就会围绕 容器 和项目 来介绍网格布局，
目录
容器属性

grid | inline-grid
grid-template-rows | grid-template-columns
grid-template-areas
grid-row-gap | grid-column-gap | grid-gap
justify-items | align-items | place-items
grid-auto-rows | grid-auto-columns | grid-auto-flow
项目属性

grid-row-start | grid-row-end | grid-column-start | grid-column-end
grid-row | grid-column
justify-self | align-self | place-self
容器相关属性
grid | inline-grid
display: grid;
display: inline-grid; 说明：类比于block于inline-block的区别，grid和inline-grid的区别也一样，后者可以和其他行内元素同时放在同一行上显示。
grid-template-rows | grid-template-columns
grid-template-rows: 设置行高
grid-template-columns：设置列宽
以上三个属性值可以是很多方式：

固定值： 50px等
repeat，以及auto-fill
fr关键字
auto关键字
minmax()函数
我们来试试上面的5中形式：

首先，html内容都是如下：

//html

//公共css
.container{
display: grid;
grid-gap: 10px 10px;
}
.container .item{
background: dodgerblue;
}
复制代码

1. 固定值
   //css
   .container{
   grid-template-rows: 50px 50px 50px;
   grid-template-columns: 50px 50px 50px;
   }
   复制代码
   效果如下：

2. repeat()函数
   从上面的例子，我们可以看到如果有重复的固定值，那么我们就可以用repeat函数去代替

//css
.container{
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
复制代码
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container{
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(auto-fill, 50px);
}
复制代码
效果如下：

其中红色部分空的，但是是占据空间的，为了更生动的看一下效果，我们右击打开“检查”，查看一下element标签，我们可以看到如下效果：

其中浅蓝色的单元格都是自动生成的单元格，深蓝色的单元格是我们代码生成的。
3.fr关键字
即fraction的缩写，意为"片段"，用于表示单元格之间的比例关系，

如下效果：

代码如下：

.container{
width: 200px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: 1fr 2fr 1fr;
}
复制代码
此时，我们设置了容器总宽度为200px, 然后按1:2:1的比例来分配，即中间的单元格为100px，两边为50px

4. auto关键字
   我们来实现一个常见的三栏布局，即左右各200px,中间撑满剩余宽度。

代码如下：

.container{
grid-template-rows: repeat(3, 50px);
grid-template-columns: 200px auto 200px;
}
复制代码
即auto对应的单元格会自动盛满剩余宽度

5. minmax()函数
   顾名思义，设置一个范围，最大值和最小值

.container{
grid-template-rows: repeat(3, 50px);
grid-template-columns: 50px 50px minmax(50px, 100px);
}
复制代码
我们来看一下效果：

这个时候是按最大列宽显示的，为什么呢？这是因为此时我们的容器没有设置宽度，默认为auto，所以会按最大值去渲染，但是，我们如果设置容器宽度小于150px呢？（因为总共3列，前两列都是50px，第三列最小也是50px）
.container{
grid-template-rows: repeat(3, 50px);
grid-template-columns: 50px 50px minmax(50px, 100px);
width: 140px;
}
复制代码
效果如下：

其中黄色部分就是多出来的，因为容器宽度为140px，前两列为50px, 第三列最小也是50px，再加上列间距，所以整体单元格宽度就超出了140px，如果不想超出，自己可以试着加一个overflow：hidden试试看另外的效果：

以上，我们说了grid-template-rows，以及grid-template-columns常见属性值的形式，并且这些形式是可以相互在一起使用。

grid-template-areas
该属性用来设置区域，我们通过上面我们知道，一个容器由一个个单元格（或者叫项目）组成，我们想要对这些单元格再做进一步的划分，不同的一个或多个单元格组成一个区域，这样就形成了：容器>区域>单元格 的基本形式。

代码如下：

//html

//css
.container{
display: grid;
width: 150px;
height: 150px;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
“a a a”
“b c c”
“b d d”
}
.container .item-a {
grid-area: a;
background: dodgerblue;
}
.container .item-b {
grid-area: b;
background: green;
}
.container .item-c {
grid-area: c;
background: yellow;
}
.container .item-d {
grid-area: d;
background: red;
}
复制代码
实现的效果如下：

我们来分析一下grid-template-areas的作用是什么？很显然，它可以将单元格分类，不同的类表示不同的区域，同时，原本3x3的网格布局，需要指定9个单元格标签，而现在我们只需要四个标签，然后每个标签通过grid-area设置区域名，最后每个区域在哪里，怎么布局，是通过grid-tempate-areas去生成。

即：通过grid-area为指定标签设置区域名，然后通过grid-template-areas设置区域怎么排版和显示

注意：我们设置的网格区域一定要形成规整的矩形区域，什么L形，凹的或凸的形状都是不支持的，会认为是无效的属性值。

通过前面介绍，我们分别学习了：grid-template-rows grid-template-columns grid-template-areas, 当然这三个属性也可以合成一个属性，即grid-template

grid-row-gap | grid-column-gap | grid-gap
grid-row-gap: 设置行间距
grid-column-gap： 设置列间距
grid-gap:
这三个属性比较简单，不多说，在文章刚开始公共css文件中，我们也设置了间距，之前的效果图也都有间隔的。

justify-items | align-items | place-items
用于设置网格元素(或者说是每个单元格的内容)在水平和垂直方向的上中下左右对齐，还是拉伸。

justify-items: start | end | center | stretch
align-items:start | end | center | stretch
place-items: |
我们来看一个例子：

.container {
justify-items: stretch; //默认值
align-items: stretch; // 默认值
}
复制代码
效果如下：

再来看看其他值：

.container {
justify-items: start;
align-items: end;
}
复制代码
效果如下：

再 看看居中的效果：

.container {
justify-items: center;
align-items: center;
}
复制代码

justify-content | align-content | place-content
justify-content: stretch | start | end | center | space-between | space-around | space-evenly;
align-content: stretch | start | end | center | space-between | space-around | space-evenly;
place-content: 合并写法
首先，我们来看看默认的效果：

.container {
justify-content: start;
align-content: start;
}
复制代码
效果如下：

再看看居中的效果：

.container {
justify-content: center;
}
复制代码
效果如下：

同样，如果是：justify-content: end；则靠右显示。

再来看看space-around:

.container {
justify-content: space-around;
}
复制代码
效果如下：

继续看：space-evenly

.container {
justify-content: space-evenly;
}
复制代码
效果如下：

注意：此处仔细观看space-around和space-evenly的区别，前者是保证每一列的左右间距相同，这样的话，比如第二列的左间距和第一列的右间距加起来就是两倍的距离了，但是space-evenly只是纯粹的控制列之间的间距等分。

最后，我们看一下：space-between

.container {
justify-content: space-between;
}
复制代码
效果如下：

上面这几个属性和flex布局里面的属性都比较类似，大家可以试着对比去看看效果。

grid-auto-rows | grid-auto-columns | grid-auto-flow
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

例如：一个3x3的网格如下：

我们希望把第三个项目放到 第四行 和第三列，怎么处理？

.container .item:nth-child(3){
grid-row-start: 4;
grid-row-end: 5;
grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
background: red;
}
复制代码
效果如下：

此时，我们看到第三个项目，放到第四行第三列以后，高度变成自动包裹内容，怎么设置这个单独放出来的项目的样式呢？grid-auto-rows 和grid-auto-columns
.container {
grid-auto-rows: 100px;
}
.container .item:nth-child(3){
grid-row-start: 4;
grid-row-end: 5;
grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
background: red;
}

//注意：此处的grid-row-start grid-column-start grid-column都是项目的属性，用于设置项目在水平和垂直方向上的起始网格线和网格线，即项目的位置处于哪一行，那一列。 下面我们会详细介绍
复制代码
效果如下：

最后，我们看一下容器的最后一个属性：grid-auto-flow ，用来设置项目的排列方向，默认是水平方向，也可以是垂直方向

.container {
grid-auto-flow: row//默认值
}
复制代码

改成垂直方向：

.container {
grid-auto-flow: column
}
复制代码
效果如下：

项目相关属性
grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线
grid-row | grid-column： 缩写
grid-area: 设置项目的区域名
例如：实现如下效果：

.container{
display: grid;
grid-template-rows: repeat(4, 50px);
grid-template-columns: repeat(4, 50px);
grid-gap: 10px 10px;
grid-auto-rows: 50px;
}
.container .item:nth-child(5){
grid-row: 2/4;
grid-column: 2/4;
}

复制代码
通过这些属性，可以控制项目的位置，以及大小，可以实现类似合并单元格的效果哦。

接着上面的例子，实现如下效果：

看到这个效果，可能就想到了justify-items 和align-items 设置为center不就可以啦，

没错，但是justify-items和align-items是容器的属性，是对所有的项目有效的，如果我们只是想把某一个单元格设置怎么做？

.container .item:nth-child(5){
justify-self: center;
align-self: center;
}
复制代码
同理，也可以缩写：place-self: center center;

至此，grid布局相关属性就介绍完了，相关属性比较多，也容易混淆，更多还是要在我们项目去实践使用，当然前提是对兼容性要求不高。

下面是在学习过程中参考的一些网站：

前端未来页面布局发展方向是 Flexbox 还是 Grid ? www.zhihu.com/question/28…
张鑫旭： www.zhangxinxu.com/wordpress/2…
阮一峰：www.ruanyifeng.com/blog/2019/0…
flex vs grid: blog.csdn.net/iac743nj0b/…

转自https://juejin.im/post/5d3946335188255ac45f7331