Skip to content

grid-auto-flow ​

描述 ​

该 grid-auto-flow 属性确定自动布局算法如何对隐式创建的布局元素工作,指示它们将如何放置在布局网格中。为了设置布局网格容器中隐式创建的列的大小,可以使用grid-auto-columns属性,grid-auto-rows属性用于指定隐式创建的列的大小。

效果展示 ​

语法 ​

css
grid-auto-flow: [ row | column] || dense;

值 ​

  • row 一个关键字,指示自动放置算法通过依次填充每行并根据需要添加新行来放置元素。这是默认值。
  • column 一个关键字,指示自动放置算法通过依次填充每一列来放置元素,并根据需要添加新列。
  • dense 一个关键字,指示自动放置算法使用“密集”元素放置算法,如果布局中进一步出现适当大小的元素,该算法将尝试填充网格中以前形成的空隙。这可能导致元素的外观不符合指示的顺序,同时填补大元素留下的孔。如果省略此密集关键字,则使用“稀疏”算法,该算法将元素放置在网格中而不后退以填充空白。这可确保所有自动放置的元素都“按顺序”显示,即使这会留下可以用后面的元素填充的空白。