携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

大家好，首次以两篇文章讲解同一个知识体系。这本源于grid布局本身的复杂性，以及属性种类繁多。同时，也希望大家轻松愉悦的吸收掉Grid布局的相关知识。那接下来我们继续学习吧。

gird属性

上一篇文章中，向大家介绍了使用频率相对更高，且具有实用价值的属性。没有阅读的同学，可以先去看看，这会更有利于阅读本文。而今天，要讲解的属性，更相当于进阶篇。所以使用到的话，会更美观。
grid-auto-flow：它与flex中flex-direction较为相似。因为，他俩都是改变项目的排练方式。值主要有row、column、dense三个值。row代表从左到右排列，column代表从上到下排列，dense则是稠密程度。这里要注意的点就是，他们可以复合使用。例如：grid-auto-flow: row dense;
justify-content、align-content这两个较简单的属性，与在其他地方使用时相似，grid中也是用来调节水平和竖直方向上的相对位置。常用的值是center居中。此处注意点就是它们对于整个表生效（不懂表概念的也可以去阅读我之前文章）。
justify-items、align-items与上面两个属性用法几乎一样。但是它俩作用的目标是项目。也就是不会影响表。这里可以着重提一下stretch这个值，这词本身含义是展开，在这里你可以理解为平铺开。也就是说它会将整个项目填充满。
grid-auto-rows、grid-auto-columns两位则是今天的重点嘉宾，昨天我们有聊过grid-template-rows、grid-template-columns是生成行列信息的，但是当所设置行列不能容下所需展示的数据时，auto-rows/columns就起作用了，也就是说，它俩是用来设置，超出我们所设置行列以外的行列宽度。例如：当我们设置了grid-template-rows：60px 60px;grid-template-columns: 60px 60px;也就是前两行两列是60px的，超出的则可以使用gird-auto-rows/columns设置。

实战

//html部分
<div class="yaoshe-grid">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-c"></div>
    <div class="item-d"></div>
</div>


// css部分
.yaoshe-grid {
    display: grid;
    height: 600px;
    width: 900px;
    grid-gap: 10px;
    grid-template: repeat(8, 1fr) / repeat(6, 1fr);
    grid-auto-flow: row dense；
}

.item-a {
    background-color: lime;
    grid-row-start: 3;
}

.item-b {
    background-color: red;
}

.item-c {
    background-color: yellow;
}

.item-d {
     grid-column-start: 2;
     background-color: blue;
}

结束语

终于把grid给拿下来了，之后再有行列布局的情况，都可以尝试使用grid了。当然flex布局大家也是要熟练掌握的，他们两个我觉得各有优缺点，好的技术一定要结合业务去体现。希望大家都能成为做好业务用好技术的好程序员。

跨入秋天，不必为失去浪漫而悲伤，应该为成熟收获而自豪