grid-template-rows Property in CSS Grid Layouts
grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.
Example 1: How to Create a Three-Row Grid Container
- CSS
- HTML
section {
display: grid;
grid-template-rows: 95px 1fr 70px;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}
<section>
<div>1</div>
<div>2</div>
</section>
The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.
We used the fr (fraction) unit to scale the second row relative to the fraction of available space in the grid container.
Example 2: How to Create a Three-Row and Four-Column Grid Container
- CSS
- HTML
section {
display: grid;
grid-template-rows: 90px 300px 1fr;
grid-template-columns: auto auto auto auto;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the grid-template-rows property to display three columns of different heights in the selected <section> grid container.
You can use the grid-auto-rows property to specify default row heights for all the grid container's rows. For instance, grid-auto-rows: 100px will set default heights of 100px for all rows. But a grid-template-rows declaration will override it.
- Use the CSS
repeat()function to specifygrid-template-rowsvalues with repeated patterns. - Use the CSS
row-gapproperty to create gaps between grid rows.
Overview
This article discussed what a CSS grid-template-rows property is. We also used examples to see how it works.