网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册 - Break易站

• CSS 中文开发手册​ 网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册
  grid-auto-flow控制自动布局算法如何工作，指定自动放置项目将究竟是如何流入网格。
  /* 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

应用于

grid containers

是否继承

no

适用媒体

visual

计算值

as specified

动画类型

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

语法
取值为下面两种形式之一：
单个关键字：row，column或dense。两个关键词：row dense或column dense.
价值
row是一个关键字，指定自动放置算法通过依次填充每一行来放置项，并在必要时添加新行。如果两者都没有row也不column提供，row都是假设的。
column是一个关键字，指定自动放置算法通过依次填充每个列来放置项，在必要时添加新列。
dense是一个关键字，指定自动布局算法使用“密集”填充算法，如果稍后出现较小的项目，该算法将尝试在网格中更早地填充漏洞。这可能会导致项目出现无序，这样做会填补较大的项目留下的漏洞。
如果省略，则使用“稀疏”算法，其中放置算法只在放置项目时在网格中“向前”移动，从不回溯以填补漏洞。这确保了所有自动放置的项目看起来“有序”，即使这留下了漏洞，可能已经填补了以后的项目。
形式语法
[ row | column ] || dense
例
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内容
#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

Status

Comment

CSS Grid LayoutThe definition of 'grid-auto-flow' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Edge

Opera

Safari

Basic support

57.01

52.0 (52.0)2

No support

No support

443

No support4

Feature

Android Webview

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

57.01

57.01

52.0 (52.0)2

No support

44

No support