CSS Grid 网格布局(入门)- 网格项排序 grid-auto-flow

grid-auto-flow 是设置网格项排序的属性,这个属性设置在容器上。在网格行列设置好了后,网格项会按照默认的 网格顺序一个个的放置到网格单元中。默认的网格顺序设置是 grid-auto-flow:row; ,先放第一行,再放第二行..., 简单理解为先行后列。

  • row 先行后列(默认)。
  • column 先列后行。
  • dense 网格项填充网格中的任何网格单元。
  • row dense 先行后列,并填满网格中的任何网格单元。
  • column dense 先列后行,并填满网格中的任何网格单元。
.wrap{
	display: grid;
	grid-auto-flow:row ;
}
grid_网格排序_row1 4-1
.wrap{
	display: grid;
	grid-auto-flow:column;
}
grid_网格排序_row2 4-2
.wrap{
	display: grid;
	grid-auto-flow:dense;
}

dense 是密集的,会让网格变得很密集,不出现空网格单元,查看实例

查看实例 看 column 和 column dense 的不同。

JavaScript 语法:

object.style.gridAutoFlow = "row dense" ;