Signup/Sign In

CSS grid-auto-flow Property

The grid-auto-flow property in CSS is known to control how the auto-placement algorithm works and specifies exactly how auto-placed items flow into the grid. The grid-auto-flow property may be specified as one of the forms such as - a single keyword- one of the rows or columns or dense or the two keywords such as row dense or column dense.

Syntax

[ row | column ] || dense

Example: CSS grid-auto-flow Property

In the example below, we are using the grid-auto-flow property with different border styles, colors, and different values. In this case, we have given the grid-auto-flow property as column.

The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.

<!DOCTYPE html>
<html>

<head>
	<title>The grid-auto-rows property in CSS</title>
	<style type="text/css">
		#grid {
		  height: 200px;
		  width: 200px;
		  display: grid;
		  gap: 10px;
		  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
		  grid-auto-flow: column; 
		}
		
		#item1 {
		  background-color: red;
		  grid-row-start: 3;
		}
		
		#item2 {
		  background-color: purple;
		}
		
		#item3 {
		  background-color: blue;
		}
		
		#item4 {
		  grid-column-start: 2;
		  background-color: deeppink;
		}
		
		#item5 {
		  background-color: gray;
		}
	</style>
</head>

<body>
	<div id="grid">
		<div id="item1"></div>
		<div id="item2"></div>
		<div id="item3"></div>
		<div id="item4"></div>
		<div id="item5"></div>
	</div>
</body>

</html>

Output

Example 2: CSS grid-auto-flow Property

In the example below, we are using the grid-auto-flow property with different border styles, colors and their different values. In this case, we have given the grid-auto-flow property as a row dense. The CSS styling is done inside the opening and closing head tags of the HTML.

The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.

<!DOCTYPE html>
<html>

<head>
	<title>The grid-auto-rows property in CSS</title>
	<style type="text/css">
		#grid {
		  height: 200px;
		  width: 200px;
		  display: grid;
		  gap: 10px;
		  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
		  grid-auto-flow: row dense;
		}
		
		#item1 {
		  background-color: red;
		  grid-row-start: 3;
		}
		
		#item2 {
		  background-color: purple;
		}
		
		#item3 {
		  background-color: blue;
		}
		
		#item4 {
		  grid-column-start: 2;
		  background-color: deeppink;
		}
		
		#item5 {
		  background-color: gray;
		}
	</style>
</head>

<body>
	<div id="grid">
		<div id="item1"></div>
		<div id="item2"></div>
		<div id="item3"></div>
		<div id="item4"></div>
		<div id="item5"></div>
	</div>
</body>

</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 57 57
Edge 16 16
Firefox 52 52
Internet Explorer no no
Opera 44 44
Safari 10.1 10.1
Webview Android 57 57
Chrome Android 57 57
Firefox Android 52 52
Opera Android 43 43
IOS Safari 10.3 10.3
Samsung Internet 6.0 6.0

Conclusion

The initial value for the grid-auto-flow property in CSS is 'row'. This property is applicable to grid containers. It is not an inherited property. The computed value for this property is the as specified one.



About the author:
I like to write content about technology, helping users to understand technical terms easily. I also write about Python, Java, and various other programming language. I have an experience of 3+ years in content creation.