CSS grid-auto-rows

The CSS grid-auto-rows property is used to define the default size (height) for all rows in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-rows: 120px;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / 2 / 4;}
      #b {grid-area: 2 / 1 / 2 / 2;}
      #e {grid-area: 3 / 1 / 4 / 4;}
      #f {grid-area: 4 / 1 / span 3 / span 3;}
      #g {grid-area: 7 / 1 / 8 / 4;}
      #h {grid-area: 8 / 1 / 10 / 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">E</div>
      <div id="f">F</div>
      <div id="g">G</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>

Output

See the above output, the default height for all rows are 120px, except those, whose height are increased manually such as DIV with IDs f and h.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-area property is used to define the location and size of a grid item.

CSS grid-auto-rows Syntax

The syntax of grid-auto-rows property in CSS, is:

grid-auto-rows: x;

The value of x should be any of the following:

auto - used to define the default value for grid-auto-rows property
length - used when we need to define the self sized row in grid layout
min-content - used to set the row size based on the size of largest row item
max-content - used to set the size based on the size of largest row item

Note - The max-content and min-content is used to adjust the row size based on the largest column's content on that row. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-rows: max-content;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / 2 / 4;}
      #e {grid-area: 3 / 1 / 4 / 4;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quod
      perspiciatis beatae commodi? Eius eveniet ullam recusandae officiis distinctio mollitia
      ab corporis eos, error libero autem nemo cum non placeat optio facere! Aliquam, atque
      cupiditate ab alias nobis vitae neque sed veniam expedita id incidunt minima explicabo
      deleniti ratione reiciendis laborum magni ullam earum optio rerum. Ducimus dicta unde
      earum. Impedit pariatur placeat iste omnis sequi, temporibus ducimus repellendus aperiam
      optio. Officia impedit, et a, aspernatur similique sequi nam enim neque amet, corporis
      sapiente laudantium aperiam error nostrum totam optio asperiores quis minima? Voluptates
      quisquam unde adipisci, nulla rerum iure.</div>
      <div id="d">I'm from Germany</div>
      <div id="e">E</div>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quod perspiciatis beatae commodi? Eius eveniet ullam recusandae officiis distinctio mollitia ab corporis eos, error libero autem nemo cum non placeat optio facere! Aliquam, atque cupiditate ab alias nobis vitae neque sed veniam expedita id incidunt minima explicabo deleniti ratione reiciendis laborum magni ullam earum optio rerum. Ducimus dicta unde earum. Impedit pariatur placeat iste omnis sequi, temporibus ducimus repellendus aperiam optio. Officia impedit, et a, aspernatur similique sequi nam enim neque amet, corporis sapiente laudantium aperiam error nostrum totam optio asperiores quis minima? Voluptates quisquam unde adipisci, nulla rerum iure.

I'm from Germany

CSS Online Test

« Previous Tutorial Next Tutorial »