CSS Grid 布局是一种新的布局方式，它可以让我们更加灵活地排版网页元素。其中，grid-auto-flow 属性可以控制网格自动填充的顺序和方向，让我们来看一下如何使用它。
什么是 grid-auto-flow 属性？
grid-auto-flow 属性用于控制网格自动填充的顺序和方向。它有四个可能的值：
row：按照行方向填充column：按照列方向填充dense：尽可能地填充网格中的空隙row dense或column dense：结合前两个值的填充方式，并尝试尽可能地填充网格中的空隙
默认值为 row，也就是按行填充。
如何使用 grid-auto-flow 属性？
下面是一个简单的网格布局示例：
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- ---- ----- - ---------- - ----------------- ----- -------- ----- ----------- ------- - --------
它被分成了三列，并且每个网格都有 10 像素的间隙。
现在，我们可以添加 grid-auto-flow 属性来改变网格填充的方式，比如从左到右填充：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-flow: column;
}结果就是每一列都被填充满了，就像这样：
同样的，我们也可以使用 dense 值来尝试填充网格中的空隙：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-flow: dense;
}结果就是网格元素被紧密地填充在网格中，就像这样：
通过使用 grid-auto-flow 属性，我们可以更好地控制网格布局中网格元素的填充方式和顺序。
总结
grid-auto-flow 属性允许我们控制 CSS Grid 布局中网格元素的填充方式和顺序。默认情况下，它按照行顺序填充，但是我们可以使用 row、column、dense 或 row dense、column dense 来改变填充方式。通过正确地使用 grid-auto-flow 属性，我们可以更加灵活地排版网页元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2097648841e9894e5e7b6