CSS - grid-auto-flow 属性

上一页
下一页

CSS 属性 grid-auto-flow 管理自动放置算法的行为，并确定用于自动放置的项目在网格中的确切排列方式。

您可以通过以下两种方式之一来表示此属性。

  • 单个关键字，可从行、列或密集选项中进行选择。
  • 两个关键字的组合：行密集或列密集。

可能的值

  • row - 通过按顺序填充每一行并根据需要创建新行来定位对象。如果既未指定行也未指定列，则默认假定为行。
  • column - 通过按顺序填充每一列来定位对象，如果需要，还可以创建其他列。
  • dense - 使用dense 打包方法时，网格中的空白空间将使用优先级填充，这可能导致项目出现乱序，以填充由较大项目创建的空白。如果省略此项，则使用稀疏算法。这只有在放置元素并保持顺序时才会向前移动，即使这会导致以后可以填充的空白区域。

语法


 grid-auto-flow = [ row | column ] || dense

适用于

网格容器。

CSS grid-auto-flow - 基本示例

以下示例演示了 grid-auto-flow 的用法

  • CSS 属性 grid-auto-flow 设置为 column，并确定网格项在网格容器中自动放置的方向。
  • 此属性通过先填充列，然后再插入下一个元素，来控制没有固定位置的其他元素的放置顺序。
  • 要更改此行为，您可以将 grid-auto-flow 的值更改为 row（用于基于行的放置策略）或更改为 dense 值（以更紧凑的方式填充可用空间，无论是在行中还是在列中）。

<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; /* Change this property to see different effects */
	 	}
	 	.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 - 行值

在以下示例中，网格项的自动放置技术由 CSS 规则 grid-auto-flow： row; 指定，该规则确保项从上到下、从左到右排列成行，在继续下一行之前填充每一行。

这显示了如何使用 grid-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 - 列值

在以下示例中，网格项的自动放置技术由 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 - 密集值

在以下示例中，网格设置为使用 grid-auto-flow： dense; 来排列项目。这意味着这些物品将被紧密包装，智能地填充空白空间并保持它们在代码中的原始顺序。


<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 - 行密集值

在以下示例中，网格设置为使用 grid-auto-flow： row dense; 来排列项目。这意味着网格将项目排成行，紧凑地填充可用空间并保持指定的项目顺序。


<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 - 列密集值

在以下示例中，网格设置为使用 grid-auto-flow： column dense; 来排列项目。这意味着网格将项目组织成列，巧妙地填充空白以创建紧凑的布局，同时保持项目的原始顺序不变。


<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 属性会根据从下拉菜单中选择的选项动态更改。


<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>
打印本页
上一页
下一页