grid-auto-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年10月.
grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
尝试一下
grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: row dense; <section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div> </section> #example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(40px, auto)); grid-gap: 10px; width: 220px; } #example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; } #example-element > div:nth-child(1) { grid-column: auto / span 2; } #example-element > div:nth-child(2) { grid-column: auto / span 2; } 语法
css
/* Keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* Global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; 此属性有两种形式：
- 单个关键字：
row、column，或dense中的一个。 - 两个关键字：
row dense或column dense。
取值
row-
该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定
row也没有column，则默认为row。 column-
该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。
dense-
该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。
正式语法
grid-auto-flow =
[ row | column ] ||
dense
示例
HTML
html
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changeGridAutoFlow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changeGridAutoFlow()" /> <label for="dense">dense</label> CSS
css
#grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } 规范
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |
浏览器兼容性
Loading…
参见
- Related CSS properties:
grid-auto-rows,grid-auto-columns,grid - Grid Layout Guide: Auto-placement in grid layout
- Video tutorial: Introducing Grid auto-placement and order