Can grid-template-rows: Repeat(auto-fill, 80px) be used interchangeably with grid-auto-rows: 80px?

Question

I want the grid to add more rows as needed when adding dynamic content.

This will solve the problem:

.grid {
  display: grid;
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
//  grid-template-rows: repeat(auto-fill, 80px);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 60px 60px;
}

I want to know if I can use grid-template-rows:repeat(auto-fill, 80px); instead of grid-auto-rows: 80px?

Answer 1

Well, grid-template-rows: Repeat(auto-fill, 80px); is according to the spec, but it doesn't give the desired result. Instead, it just creates an explicit row with a height of 80 pixels, and the other rows resize automatically.

However, since you want to add rows as needed, i.e. implicitly created grid rows, you should use grid-auto-rows and there is no need to use grid -template-rows. < /p>

.grid {
  display: grid;
  grid-auto-rows: 80px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 60px;
  }

.grid div {
  background-color: silver;
}

<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>