逐列插入網格元素:
.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 網格布局