CSS 属性 grid-auto-flow 管理自动放置算法的行为，并确定用于自动放置的项目在网格中排列的确切方式。
您可以表达可以通过以下两种方式之一来实现此属性。
单个关键字，可以从行、列或密集中进行选择。
两个关键字的组合:行密集或列密集。
属性值
row: 通过顺序填充每一行来定位对象，并且根据需要创建新行。如果未指定行或列，则默认假定为行。
column: 通过按顺序填充每一列来定位对象，如果需要，还会创建其他列。
dense : 使用密集填充方法，网格中的空白空间将被优先填充，这可能会导致项目出现无序，以填补较大项目造成的空白。
如果省略，则使用稀疏算法。仅在放置元素并保持顺序时才会向前移动，即使这会导致稍后可以填充的空白。
语法
grid-auto-flow = [ row | column ] || dense 适用范围
网格容器。
CSS grid-auto-flow: 基本示例
以下示例演示了 grid-auto-flow 的使用
CSS 属性 grid-auto-flow 设置为"column"，并确定网格项在网格容器内自动放置的方向。
此属性通过在插入下一个元素之前先填充列来控制没有固定位置的其他元素的放置顺序。
要更改此行为，您可以将 grid-auto-flow 的值更改为 row 以实现基于行的放置策略，或者将其更改为密集以更紧凑地填充可用空间（按行或按列）。
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
gap: 15px;
grid-auto-flow: column; /* 改变这个属性可以看到不同的效果 */
}
.item:nth-child(1) { background-color: #3498db; }
.item:nth-child(2) { background-color: #27ae60; }
.item:nth-child(3) { background-color: #e74c3c; }
.item:nth-child(4) { background-color: #f39c12; }
.item:nth-child(5) { background-color: #9b59b6; }
.item:nth-child(6) { background-color: #2c3e50; }
.item:nth-child(7) { background-color: #1abc9c; }
.item:nth-child(8) { background-color: #34495e; }
.item:nth-child(9) { background-color: #e67e22; }
.item {
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html> CSS grid-auto-flow: row
在以下示例中，网格项的自动放置技术由 CSS 规则指定grid-auto-flow: row;，确保项目从上到下、从左到右按行排列，在继续下一行之前填充每一行。
这显示了网格如何-auto-flow 属性可用于调节网格布局。
<html>
<head>
<style>
body {
background-color: #F2F2F2;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
#customDIV {
height: 300px;
display: grid;
gap: 10px;
background-color: #49a4e6;
padding: 10px;
grid-auto-flow: row;
}
#customDIV div {
background-color: rgba(255, 255, 255, 1);
border-radius: 15px;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.customItem3 {
grid-row: span 2;
grid-column: span 2;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow</h1>
<div id="customDIV">
<div class="customItem1">Alpha</div>
<div class="customItem2">Beta</div>
<div class="customItem3">Gamma</div>
<div class="customItem4">Delta</div>
</div>
</body>
</html> CSS grid-auto-flow: column
在下面的示例中，网格的自动放置技术items 由 CSS 规则 grid-auto-flow: column; 指定，它确保项目从左到右、从上到下按列排列，在移至下一列之前填充每一列。
<html>
<head>
<style>
body {
background-color: #F2F2F2;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
#customDIV {
width: 400px;
display: grid;
gap: 10px;
background-color: #7fc6bc;
padding: 10px;
grid-auto-flow: column;
}
#customDIV div {
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.customItem1 {
grid-column: span 2;
}
.customItem3 {
grid-row: span 2;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow: column;</h1>
<div id="customDIV">
<div class="customItem1">Element Alpha</div>
<div class="customItem2">Element Beta</div>
<div class="customItem3">Element Gamma</div>
<div class="customItem4">Element Delta</div>
</div>
</body>
</html> CSS grid-auto-flow: dend
在以下示例中，网格设置为使用 grid-auto-flow: dend; 排列项目。这意味着项目将被紧密地打包，智能地填充空白并保持其在代码中的原始顺序。
<html>
<head>
<style>
body {
background-color: #E0E0E0;
font-family: 'Verdana', sans-serif;
margin: 0;
padding: 0;
}
#customDIV {
width: 400px;
display: grid;
gap: 10px;
background-color: #9B59B6;
padding: 10px;
grid-auto-flow: dense;
}
#customDIV div {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
text-align: center;
padding: 15px 0;
font-size: 24px;
}
.customItem1 {
grid-column: span 2;
}
.customItem3 {
grid-row: span 2;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow: dense;</h1>
<div id="customDIV">
<div class="customItem1">Alpha</div>
<div class="customItem2">Beta</div>
<div class="customItem3">Gamma</div>
<div class="customItem4">Delta</div>
</div>
</body>
</html> CSS grid-auto-flow: row dend
在在下面的示例中，网格设置为使用 grid-auto-flow: row dend; 排列项目。这意味着网格按行排列项目，紧凑地填充可用空间并保持指定的项目顺序。
<html>
<head>
<style>
body {
background-color: #EAEAEA;
font-family: 'Courier New', monospace;
margin: 0;
padding: 0;
}
#customDIV {
width: 400px;
display: grid;
gap: 10px;
background-color: #3498DB;
padding: 10px;
grid-auto-flow: row dense;
}
#customDIV div {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
text-align: center;
padding: 15px 0;
font-size: 20px;
}
.customItem1 {
grid-column: span 2;
}
.customItem3 {
grid-row: span 2;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow: row dense;</h1>
<div id="customDIV">
<div class="customItem1">Element Alpha</div>
<div class="customItem2">Element Beta</div>
<div class="customItem3">Element Gamma</div>
<div class="customItem4">Element Delta</div>
<div class="customItem5">Theta Element</div>
<div class="customItem6">Lambda Element</div>
</div>
</body>
</html> CSS grid-auto-flow: column dend
在以下示例中，网格被设置为使用 grid-auto-flow: columns dend; 来排列项目。这意味着网格按列组织项目，巧妙地填充间隙以创建压缩布局，同时保持项目的原始顺序不变。
<html>
<head>
<style>
body {
background-color: #F8F8F8;
font-family: 'Georgia', serif;
margin: 0;
padding: 0;
}
#customDIV {
width: 400px;
display: grid;
gap: 10px;
background-color: #FF6347;
padding: 10px;
grid-auto-flow: column dense;
}
#customDIV div {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 12px;
text-align: center;
padding: 15px 0;
font-size: 18px;
}
.customItem1 {
grid-row: span 2;
}
.customItem3 {
grid-column: span 2;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow: column dense;</h1>
<div id="customDIV">
<div class="customItem1">Alpha Element</div>
<div class="customItem2">Beta Element</div>
<div class="customItem3">Gamma Element</div>
<div class="customItem4">Delta Element</div>
<div class="customItem5">Theta Element</div>
<div class="customItem6">Lambda Element</div>
</div>
</body>
</html> CSS grid-auto-flow: grid-auto-flow
在以下示例中，有一个网格布局，允许用户在网格元素的行、列和密集配置之间进行更改。
grid-auto-flow 属性根据从下拉菜单中选择的选项动态变化。
<html>
<head>
<style>
body {
background-color: #f2dfaa;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
#customDIV {
height: 300px;
display: grid;
gap: 10px;
background-color: #fcba03;
padding: 10px;
}
#customDIV div {
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.customItem3 {
grid-row: span 2;
grid-column: span 2;
}
select {
margin: 10px;
padding: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Grid Layout with grid-auto-flow</h1>
<label for="gridAutoFlow">Change grid-auto-flow: </label>
<select id="gridAutoFlow" onchange="changeGridAutoFlow()">
<option value="row">Row</option>
<option value="column">Column</option>
<option value="dense">Dense</option>
</select>
<div id="customDIV">
<div class="customItem1">BOX: A</div>
<div class="customItem2">BOX: B</div>
<div class="customItem3">BOX: C</div>
<div class="customItem4">BOX: D</div>
</div>
<script>
function changeGridAutoFlow() {
var selectedValue = document.getElementById("gridAutoFlow").value;
document.getElementById("customDIV").style.gridAutoFlow = selectedValue;
}
</script>
</body>
</html>