CSS grid-auto-rows Property

February 10, 2021 12:37 pm IST

You are Here:

CSS grid-auto-rows Property

CSS grid-auto-rows property sets a size for the rows in a grid container.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+div div:nth-child(1) { grid-area: 1/ 1/ 2/ 2; } h2+div div:nth-child(2) { grid-area: 1/ 2/ 2/ 3; } h2+div div:nth-child(3) { grid-area: 1/ 3/ 2/ 4; } h2+div div:nth-child(4) { grid-area: 2/ 1/ 3/ 2; } h2+div div:nth-child(5) { grid-area: 2/ 2/ 3/ 3; } h2+div{ display: grid; grid-auto-flow: row; border: 1px solid black; } h2+div div{ border: 1px solid #00f; background-color: rgba(0,0,255,.2); padding: 25px; margin: 8px; text-align: center; } .point( grid-auto-rows: 150px; } .point1( grid-auto-rows: 33%; } </style> </head> <body> <h1>CSS grid-auto-rows Property</h1> <h2>grid-auto-rows: 150px;</h2> <div class="point"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> </div> <h2>grid-auto-rows: 33%;</h2> <div class="point1"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> </div> </body> </html>

Run

Syntax

Using CSS

element{ grid-auto-rows: 150px; }

Using Javascript

object.style.gridAutoRows="150px";

Animatable

Yes, grid-auto-rows property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS grid-auto-rows property is auto.

Property Value

The following table provides a list of values for CSS grid-auto-rows property.

Value	Explanation
length	Allows you to define the row size of the grid in any CSS length unit.
%	Allows you to define the row size of the grid in percentage.
max-content	Sets the size of each row depending on the largest item in the row.
min-content	Sets the size of each row depending on the smallest item in the row.
minmax(min, max)	Sets a size range greater than or equal to min and less than or equal to max.
auto	The size of the rows is determined by the size of the container (div).

Using JavaScript

In the following example, we will demonstrate how to change the CSS grid-auto-rows property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv div:nth-child(1) { grid-area: 1/ 1/ 2/ 2; } #outerDiv div:nth-child(2) { grid-area: 1/ 2/ 2/ 3; } #outerDiv div:nth-child(3) { grid-area: 1/ 3/ 2/ 4; } #outerDiv div:nth-child(4) { grid-area: 2/ 1/ 3/ 2; } #outerDiv div:nth-child(5) { grid-area: 2/ 2/ 3/ 3; } #outerdiv{ display: grid; grid-auto-flow: row; border: 1px solid black; } #outerDiv div{ border: 1px solid #00f; background-color: rgba(0,0,255,.2); padding: 25px; margin: 8px; text-align: center; } </style> </head> <body> <h1>CSS grid-auto-rows Property</h1> <div id="outerDiv"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("outerDiv"); function myFunction(){ x.style.gridAutoRows = "150px"; } </script> </body> </html>

Run