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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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-rowsand there is no need to usegrid -template-rows..grid { display: grid; grid-auto-rows: 80px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 60px; } .grid div { background-color: silver; }