CSS grid-template-rows Property

The grid-template-rows CSS property is used to specify the number of rows and row height in a grid. Grid-template-row values are space-separated, with each value representing the row's height.

Syntax

grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: 150px 250px;
        grid-gap: 12px;
        background-color: #00ab55;
        padding: 12px;
    }
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 12px 0;
    }
</style>
</head>
<body>

<div class="grid-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
none	There is no set size. Rows are added as needed.
auto	The size of the rows is determined by the container's size as well as the size of the items in the row's content.
max-content	The size of each row is determined by the largest item in the row.
min-content	The size of each row is determined by the smallest item in the row.
length	Sets the row size by using a legal length value. Learn more about length units.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
grid-template-rows	57.0	52.0	10.0	16.0	44.0

grid-template-columns

hanging-punctuation

CSS grid-template-rows Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us