天天看點

CSS grid-auto-flow 屬性

逐列插入網格元素:

.grid-container {

display: grid;

grid-auto-flow: column;

}

表格中的數字表示支援該屬性的第一個浏覽器版本号。

屬性

grid-auto-flow

57

16

52

10

44

grid-auto-flow 屬性指定自動布局算法怎樣運作,精确指定在網格中被自動布局的元素怎樣排列。

預設值:

auto

繼承:

no

動畫:

支援。 閱讀關于 animatable

Version:

CSS 網格布局子產品 Level 1

JavaScript 文法:

object.style.gridAutoFlow="row dense"

描述

row

預設值。 通過填充每一行來放置網格元素,在必要時增加新列。

column

通過填充每一列來放置網格元素,在必要時增加新列。

dense

該關鍵字指定自動布局算法使用一種"稠密"堆積算法,如果後面出現了稍小的元素,則會試圖去填充網格中前面留下的空白。這樣做會填上稍大元素留下的空白,但同時也可能導緻原來出現的次序被打亂。

row dense

按行來填充網格中前面留下的空白

column dense

按列來填充網格中前面留下的空白

按行來填充網格中前面留下的空白:

grid-auto-flow: row dense;

CSS 教程: CSS 網格布局