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
?
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 usegrid -template-rows
.