Skip to Content
Codecademy Logo
Learn CSS
Learn
Advanced CSS Grid
Grid Auto Rows and Grid Auto Columns

CSS Grid provides two properties to specify the size of grid tracks added implicitly: grid-auto-rows and grid-auto-columns.

grid-auto-rows specifies the height of implicitly added grid rows. grid-auto-columns specifies the width of implicitly added grid columns.

grid-auto-rows and grid-auto-columns accept the same values as their explicit counterparts, grid-template-rows and grid-template-columns:

  • pixels (px)
  • percentages (%)
  • fractions (fr)
  • the repeat() function
<body>
  <div>Part 1</div>   
  <div>Part 2</div>
  <div>Part 3</div>
  <div>Part 4</div>
  <div>Part 5</div>
</body>
body {
  display: grid;
  grid: repeat(2, 100px) / repeat(2, 150px); 
  grid-auto-rows: 50px;
}

In the example above, there are 5 <div>s. However, in the section rule set, we only specify a 2-row, 2-column grid — four grid cells.

The fifth <div> will be added to an implicit row that will be 50 pixels tall.

If we did not specify grid-auto-rows, the rows would be auto-adjusted to the height of the content of the grid items.

These properties are declared on grid containers.

Instructions

1.

In the main rule-set in style.css, use the grid-auto-rows property to set the height of implicitly defined rows to 500 pixels.

2.

Copy and paste the last two recipe cards in index.html to add two more recipe cards to the bottom of the page.

Examine the height of the two new cards. What do you notice?

3.

Delete the height: 1600px; declaration from the main rule-set in style.css.

Folder Icon

Take this course for free

Already have an account?