hooyantsing's Blog

P147_21_栅格流动处理机制

字数统计: 141阅读时长: 1 min
2020/04/21

P147 21 栅格流动处理机制

grid-auto-flow

改变栅格元素排列顺序。

row

默认,从左向右水平排列。

cbe54ea88ca66fcecb58e1d40870d1b1.png

column

从上向下垂直排列。

46c5b387f8720e10c5bac9831b5bf9fa.png

dense

强制补空缺位置。

例:

1
2
3
4
5
6
div:nth-child(1){
    grid-column: 1/span 2;
}
div:nth-child(2){
    grid-column: 2/span 1;
}

72ef031ab45f9238e1cdf0dee8eec4af.png

由于第一行的第二列存在其他元素。因此编号2的元素被挤到了第二行的第二列。可见,第一行的第三列和第二行的第一列位置空缺出来了。

强制填补。

1
grid-auto-flow: row dense;

c9bb2af8e3ad2024673a6ea8c01da00c.png

CATALOG