CSS | grid-template-rows Property - GeeksforGeeks

08 Aug, 2019
The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row.
Syntax:
grid-template-rows: none|auto|max-content|min-content|length|
initial|inherit;
Property Values:
none: It does not set the height of grid-template-row property. It creates row when needed.Syntax:grid-template-rows: none;
grid-template-rows: none;
auto: It is used to set the size of row automatically i.e it depends on the size of container & contents in row.Syntax:grid-template-rows: auto;
grid-template-rows: auto;
max-content: It represents the maximum content of the items present in the grid.grid-template-rows: max-content;
grid-template-rows: max-content;
min-content: It represents minimal content of the items present in the grid.grid-template-rows: min-content;
grid-template-rows: min-content;
length: The size of row is set according to the specified length.grid-template-rows: length;Example 1:<!DOCTYPE html> <html>     <head>         <title>             CSS grid-template-rows Property         </title>                   <style>             .geeks {                 background-color:green;                 padding:30px;                 display: grid;                 grid-template-columns: auto auto auto auto;                grid-template-rows: auto auto;                grid-gap: 10px;             }             .GFG {                 background-color: white;                 border: 1px solid white;                 font-size: 30px;                 text-align: center;             }         </style>     </head>           <body>         <div class="geeks">             <div class="GFG">A</div>             <div class="GFG">B</div>             <div class="GFG">C</div>             <div class="GFG">D</div>             <div class="GFG">E</div>             <div class="GFG">F</div>             <div class="GFG">G</div>             <div class="GFG">H</div>         </div>     </body> </html>                     Output:Example 2:<!DOCTYPE html> <html>     <head>         <title>             CSS grid-template-rows Property         </title>                   <style>             .geeks {                 background-color:green;                 padding:30px;                 display: grid;                 grid-template-columns: auto auto auto auto;                grid-template-rows: auto 150px ;                grid-gap: 10px;             }             .GFG {                 background-color: white;                 border: 1px solid white;                 font-size: 30px;                 text-align: center;             }         </style>     </head>           <body>         <div class="geeks">             <div class="GFG">A</div>             <div class="GFG">B</div>             <div class="GFG">C</div>             <div class="GFG">D</div>             <div class="GFG">E</div>             <div class="GFG">F</div>             <div class="GFG">G</div>             <div class="GFG">H</div>         </div>     </body> </html>                     Output:Supported Browsers: The browser supported by grid-template-rows property are listed below:Google Chrome 57.0Internet Explorer 16.0Firefox 52.0Safari 10.0Opera 44.0My Personal Notes
arrow_drop_upSave
grid-template-rows: length;
Example 1:
<!DOCTYPE html> <html>     <head>         <title>             CSS grid-template-rows Property         </title>                   <style>             .geeks {                 background-color:green;                 padding:30px;                 display: grid;                 grid-template-columns: auto auto auto auto;                grid-template-rows: auto auto;                grid-gap: 10px;             }             .GFG {                 background-color: white;                 border: 1px solid white;                 font-size: 30px;                 text-align: center;             }         </style>     </head>           <body>         <div class="geeks">             <div class="GFG">A</div>             <div class="GFG">B</div>             <div class="GFG">C</div>             <div class="GFG">D</div>             <div class="GFG">E</div>             <div class="GFG">F</div>             <div class="GFG">G</div>             <div class="GFG">H</div>         </div>     </body> </html>                     
Output:
Example 2:
<!DOCTYPE html> <html>     <head>         <title>             CSS grid-template-rows Property         </title>                   <style>             .geeks {                 background-color:green;                 padding:30px;                 display: grid;                 grid-template-columns: auto auto auto auto;                grid-template-rows: auto 150px ;                grid-gap: 10px;             }             .GFG {                 background-color: white;                 border: 1px solid white;                 font-size: 30px;                 text-align: center;             }         </style>     </head>           <body>         <div class="geeks">             <div class="GFG">A</div>             <div class="GFG">B</div>             <div class="GFG">C</div>             <div class="GFG">D</div>             <div class="GFG">E</div>             <div class="GFG">F</div>             <div class="GFG">G</div>             <div class="GFG">H</div>         </div>     </body> </html>                     
Output:
Supported Browsers: The browser supported by grid-template-rows property are listed below:
Google Chrome 57.0
Internet Explorer 16.0
Firefox 52.0
Safari 10.0
Opera 44.0
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills