在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* 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;
					

This property may take one of two forms:

• a single keyword: one of row , column ，或 dense .
• two keywords: row dense or column dense .

值

row

Items are placed by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

column

Items are placed by filling each column in turn, adding new columns as necessary.

dense

"dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.

形式定义

初始值	row
适用于	grid containers
继承	no
计算值	如指定
动画类型	discrete

形式句法

[ row | column ] || dense
					

范例

Setting grid auto-placement

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">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox">
<label for="dense">dense</label>
					

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;
}
					

function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";
  if (dense.checked) {
    gridAutoFlow += " dense";
  }
  grid.style.gridAutoFlow = gridAutoFlow;
}
const selectElem = document.querySelector('select');
const inputElem = document.querySelector('input');
selectElem.addEventListener('change', changeGridAutoFlow);
inputElem.addEventListener('change', changeGridAutoFlow);
					

结果

规范

规范	状态	注释
CSS 栅格布局 The definition of 'grid-auto-flow' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
grid-auto-flow	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• 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

元数据

• 最后修改： Nov 6, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 栅格布局
4. 指南
   1. Basics concepts of grid layout
   2. Relationship to other layout methods
   3. Line-based placement
   4. Grid template areas
   5. Layout using named grid lines
   6. Auto-placement in grid layout
   7. Box alignment in grid layout
   8. Grids, logical values and writing modes
   9. CSS Grid Layout and Accessibility
   10. CSS Grid Layout and Progressive Enhancement
   11. Realizing common layouts using grids
5. 特性
   1. grid
   2. grid-area
   3. grid-auto-columns
   4. grid-auto-flow
   5. grid-auto-rows
   6. grid-column
   7. grid-column-end
   8. grid-column-gap
   9. grid-column-start
   10. grid-gap
   11. grid-row
   12. grid-row-end
   13. grid-row-gap
   14. grid-row-start
   15. grid-template
   16. grid-template-areas
   17. grid-template-columns
   18. grid-template-rows
6. 词汇表
   1. Grid lines
   2. Grid tracks
   3. Grid cell
   4. Grid areas
   5. Gutters
   6. Grid row
   7. Grid column