在grid布局中,当我们划分了网格之后,容器的子元素会按照顺序,自动的放置在每一个网格。决定这个顺序的是grid-auto-flow属性,默认值是row,即先“先行后列”。例如我们设置一个三行三列的容器,下面是html代码
1
2
3
4
5
6
7
8
9
在附上CSS样式
.container{ display: grid; grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); gap: 5px 10px;}.item{ display:flex; justify-content: center; align-items: center; font-size: 50px; color:rgb(244 96 108);}
我们可以看到默认效果是这个样子的——
![4ccd44d130f559e4bae960eaa5849dab.png](https://i-blog.csdnimg.cn/blog_migrate/e6f77f13c432367deae0dad86df710fe.jpeg)
它会先把第一行填满,再开始放入第二行。当然这个属性不只这一个取值,我们也可以将这个值改为column,即“先列后行”,我们更改一下,效果是这个样子的——
![6bb3b6456d07b071c160a05bdebb85b0.png](https://i-blog.csdnimg.cn/blog_migrate/e25f4afd65bb9ba03735c44841928a80.jpeg)
除了这两个取值,还有两个取值——row dense和column dense。这两个值主要用于,让项目尽可能的利用容器的空间,尽量不出现空格,例如下面这个布局,使用了默认的row取值——
![7c5ea13cc93785658637242385658e96.png](https://i-blog.csdnimg.cn/blog_migrate/b387c06749f969dca56a24062e4e9133.jpeg)
如图所示,这个时候空格出现在了右上角位置,这个时候我们使用row dense值,就会得到下面这种效果
![c99f54fd47e0fd5ff08e216382eae75f.png](https://i-blog.csdnimg.cn/blog_migrate/d6dd2f5c714cfdd1c9fb0eb0cc383e8c.jpeg)
如图所示,上图会先填满第一行,再填满第二行,然后依次填满第三第四行。所以3出现在了1的右边,4出现在了2的右边,空间得到了尽可能的利用,也更符合我们的视觉习惯。同理,column dense值让项目先填满容器的第1列,再填满第2列......
以上就是笔记5的所有内容。