grid-auto-flow

基线广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常工作。它自以下时间起在所有浏览器中均可用： 2020年7月.

**grid-auto-flow** CSS 属性控制自动放置算法的工作方式，精确指定自动放置的项目如何流入网格。

试一试

语法

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: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

此属性可以采用以下两种形式之一

单个关键字：row、column 或 dense 之一。
两个关键字：row dense 或 column dense。

值

row

项目通过依次填充每一行来放置，并在需要时添加新行。如果未提供 row 或 column，则假定为 row。

column

项目通过依次填充每一列来放置，并在需要时添加新列。

dense

“dense”打包算法尝试填充网格中较早的空位，如果较小的项目稍后出现。在这样做可以填补较大项目留下的空位时，这可能会导致项目出现乱序。

如果省略，则使用“sparse”算法，其中放置算法在放置项目时仅沿网格“向前”移动，从不回溯以填充空位。这确保所有自动放置的项目都“按顺序”出现，即使这会留下稍后项目可能填补的空位。

正式定义

初始值	`row`
应用于	网格容器
继承	否
计算值	按指定
动画类型	离散

正式语法

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

CSS

css

#grid {
  height: 200px;
  width: 200px;
  display: 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() {
  const grid = document.getElementById("grid");
  const direction = document.getElementById("direction");
  const dense = document.getElementById("dense");
  let 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 网格布局模块级别 2 # grid-auto-flow-property

浏览器兼容性

BCD 表格仅在浏览器中加载