grid网格布局，如何控制子元素的自动流动方式(排列方向)？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文中，苏南大叔将针对这种新的grid网格布局进行解读。本文着力解决的问题是子元素的流动方式的问题，具体来说，就是控制子元素的排列方向问题，用到的css属性是：grid-auto-flow。

大家好，这里是很久没有更新的苏南大叔的博客，这里记录苏南大叔的代码所学所想。本文测试环境：win10，chrome。

测试用例

首先要明确的观点是：display:grid并不是被所有的浏览器所支持，比如大家深恶痛绝的ie全系列，都不支持grid网格布局。那么，值得庆幸的是，目前占据主导地位的chrome浏览器是支持display:grid的。所以，本系列的所有例子，都是基于谷歌浏览器的。

另外，兼容性并不好的grid布局的效果，能够被传统的css+div布局，甚至table布局所取代的。所以，不要对grid布局死磕哦。浏览器不支持，啥意义都没有。

参考文章：https://newsn.net/say/css-grid.html

本文中的例子也是对上文中例子的稍稍改造，一个容器里面有四个子元素。那么这几个元素之间是如何排列的呢？这就是本文主要分析的内容。

<div class="box">
  <div class="item">恭</div>
  <div class="item">喜</div>
  <div class="item">发</div>
  <div class="item">财</div>
</div>
<style>
  .box {
    display: grid;
    width: 300px;
    height: 300px;
    background: rgb(255, 255, 255);
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-rows: "1fr 1fr 1fr"; */
    /* grid-auto-flow:row; */
    /* grid-auto-flow:column; */
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    font-size: 36px;
    color: white;
  }
  .item:nth-child(even) {background-color: blue;}
</style>

注意：父容器里面没有定义grid-template-columns和grid-template-rows等，它们的出现会对本文的理解出现干扰。

从上到下按行分布row【默认值】

grid-auto-flow:row;

从左到右按列分布column

grid-auto-flow:column;

特例dense

这个grid-auto-flow的取值还有：dense，row dense和column dense。这个dense比较难理解，留作后续文章说明。

使用grid-template-columns和grid-template-rows，会改变目前本文中的grid-auto-flow的表现。个人猜测，可能就是grid-auto-flow中的auto单词的由来吧，使用了template，就不会auto了。

相关链接

• https://newsn.net/say/css-flex.html
• https://newsn.net/say/css-grid.html
• https://newsn.net/say/flex-direction.html

总结

本文中，grid布局中的auto-flow的概念，和flex布局中的主轴方向flex-direction概念非常类似，大家可以多加对比。更多苏南大叔的css经验文章，请参考：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。