Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS grid-auto-rows Property

The grid-auto-rows property sets the row sizes in a grid.

The value represents the minimum height of a grid item.

Values include a length value, or auto, min-content, etc.

Example

#

A grid container with grid-auto-rows set to 65px.
All items have a height of 65px.

1
2
3
4
5
6
7
8
9
10
11
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'a a a a';
    grid-auto-rows: 65px;
  }

  .grid-container > div {
    background-color: aliceblue;
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
</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>9</div>
  <div>10</div>
  <div>11</div>
</div>

Syntax

grid-auto-columns: auto | max-content | min-content | 
                   minmax | length | %;

Values

#

Value Description
auto Default. Row height is determined by the height of the largest grid item in the row.
max-content Row height depends on the largest item in the row.
min-content Row height depends on the smallest item in the row.
minmax(min.max) Row height range between min and max
length Row height as a positive length value.
% Row height as a percentage of the container size.

More Examples

Click the buttons to see the different grid-auto-rows values.

1
2
3
4
5
6
7
8
9
10
11
<style>
  .grid-container-example {
    padding: 10px;
    background-color: steelblue;
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'a a a a';
    grid-auto-rows: auto;
  }

  .grid-container-example > div {
    padding: 15px;
    background-color: aliceblue;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="grid-container-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>9</div>
  <div>10</div>
  <div>11</div>
</div>

Browser support

This table shows when grid-auto-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

You may also like

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides