记录一下grid布局的应用，因为在日常工作中，运用element-ui的关系，导致grid布局并不是运用特别多，本身这类ui就已经在实现上运用到了，但是还是需要知道如何使用。
<div class="par-grid">
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
<div class="child-grid"></div>
</div>设置成grid，如同设置flex布局一般。只需要将par-grid的display属性设置成grid即可。这样一个简单的网格布局就出来了。
对于行以及列的设置，需要用到grid-template-row以及grid-template-column属性。下面的代码是创建一个三行三列的网格，以及每行每列的大小都是100px。
.par-grid{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}对于几行几列可以自行增加，这只是一个示范作用。另外与这两个属性差不多的是: grid-template-areas(各个网格标题)。
完成了对网格布局的设置之后，也有与flex布局相对应的子元素设置。grid-column-start,grid-template-ed,grid-row-start,grid-template-end。写个例子：
.items{
grid-column-start: 1,
grid-column-end: 4
}上面代码是每列从第一条网格线到第四条网格线，同理grid-row-start也是相同用法。对于行列都是相对应的简写，grid-column,grid-row。两者都接受两个参数：第一个是开始第二个是结束，但是中间需要 / 来隔开。比如：<start-line> / <end-line>。还有一种写法， <start-line> / span <value>。当然同样的缩写肯定少不了grid-area。
还有一个属性用于控制行与行以及列与列之间的间隙，即grid-column-gap,gri-row-gap。以及他们两者的缩写：grid-gap，第一个参数长度代表row，第二个参数长度代表column。
剩下该介绍的就是对于网格布局的对齐方式，对齐的属性无外乎就两种对齐，有一段是介绍justify对齐和align对齐的方式的区别：When you justify something, you’re changing the alignment according to the main-axis. When you align something, you’re changing the alignment according to the cross-axis。简单的说就是justify是用于水平方向的对齐，而align是用于垂直方向的对齐。
justify：justify-content, justify-items, justify-self。
align：align-content, align-items, align-self。
显而易见，content以及items是用于设置在父节点上的，分别用于整个网格的对齐和各个网格子元素的对齐方式。而self是用于设置在单独的一个子元素上。它们每一个对齐的方式都共有四个值：start，end，center，stretch。里面需要解释的只有stretch，解释可以为拉伸、或者填充，它会铺满一个网格空间。而对于content的属性来说另有三个取值：space-around，space-between，space-evenly。
space-around：在每个网格之间放置一个相同的大小的空间，在最左以及最右两端各放置一半空间。
space-betwenn：与space-aroud不同在于，左右两端不需要的多余的空间闲置。
space-evenly：与space-around不同在于，左右两端的空间与网格之间的空间是相同的。
有趣的是偶然间看见到了grid-auto-flow这个属性，它的解释是如果你没有明确放置在网格上的网格项（item），自动放置算法会自动放置这些网格项。它的值有三个：row，column，dense。dense的解释为：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺。需要注意到的是，dense可能导致你的网格项出现乱序。以下是一个来自别的博客的例子：
<div class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</div>.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
显示的结果如上图，因为是按照行来排列的所以应该和大家所想的并无差距，但是当grid-auto-flow换成了column就会有点奇妙的变化：
item-c会自动填充到b的下方，但是你可能会好奇为什么item-e不会挪到d的左边，是因为在排列行的时候固定有5行因此itemd的左变是会留白两个网格。
很愉快的把grid布局介绍到这了，一方面是为了加深印象一方面也是怕自己遗忘，以后可以回来重新阅读。