Learn

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

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 body ruleset, 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.

Instructions

1.

In style.css, delete the height: 1600px; declaration from the main ruleset .

2.

In index.html, copy and paste the last two recipe cards 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.

To make additional cards the same height, in style.css, inside the main ruleset, add the grid-auto-rows property. Set the height of the implicitly defined rows to 500 pixels.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?