4 合并grid列_grid布局笔记5——grid-auto-flow属性

在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);}

我们可以看到默认效果是这个样子的——

它会先把第一行填满，再开始放入第二行。当然这个属性不只这一个取值，我们也可以将这个值改为column，即“先列后行”，我们更改一下，效果是这个样子的——

除了这两个取值，还有两个取值——row dense和column dense。这两个值主要用于，让项目尽可能的利用容器的空间，尽量不出现空格，例如下面这个布局，使用了默认的row取值——

如图所示，这个时候空格出现在了右上角位置，这个时候我们使用row dense值，就会得到下面这种效果

如图所示，上图会先填满第一行，再填满第二行，然后依次填满第三第四行。所以3出现在了1的右边，4出现在了2的右边，空间得到了尽可能的利用，也更符合我们的视觉习惯。同理，column dense值让项目先填满容器的第1列，再填满第2列......

以上就是笔记5的所有内容。