Grid is a layout system that uses a grid with rows and columns.
The grid-template-rows
property specifies grid rows.
The value is a space-separated list with row heights.
A grid container with 2 rows that are 50px and 100px high respectively.
<style>
.grid-container {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto auto;
grid-template-rows: 50px 100px;
}
.grid-container > div {
background-color: aliceblue;
text-align: center;
padding: 15px;
font-size: 18px;
}
</style>
<div class="grid-container">
<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>
grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;
Value | Description |
---|---|
none | Rows are created if needed |
auto | Rows size is determined by the container size and on the size of the content of the items in the row |
max-content | Sets the row size depending on the largest row item |
min-content | Sets the row size depending on the smallest row item |
length | Sets the size of the row, by using any CSS legal length value. |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different grid-template-rows
values.
<style>
.grid-template-rows-example {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto auto;
grid-template-rows: none;
}
.grid-template-rows-example > div {
background-color: aliceblue;
text-align: center;
padding: 15px;
font-size: 18px;
}
</style>
<div class="grid-template-rows-example">
<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>
This table shows when grid-template-rows
support started for each browser.
Chrome
|
57 | Mar 2017 |
Firefox
|
52 | Mar 2017 |
IE/Edge
|
16 | Sep 2017 |
Opera
|
44 | Mar 2017 |
Safari
|
10 | Sep 2016 |