如何为所有行重复网格模板行

Question

我正在尝试创建网格块中行的模板：

grid-template-rows: repeat(3, 150px);

我知道，这个模板应该适用于前三行。 但是，从第四行开始，这个模板就不起作用了。
我可以制作一个适用于所有行的模板吗？

P.S. 这个模板只适用于第一行。

grid-template-rows: 150px;

- Dmitriy Doronin

---

你可以在行上设置 height: 150px。 - Nenad Vracar

Answer 1

使用grid-auto-rows（自动生成行）代替grid-template-rows（手动生成行）。在当前情况下，grid-auto-rows: 150px 可以解决问题。演示：

.grid {
  display: grid;
  grid-auto-rows: 150px;
  /* space between columns for demo */
  grid-gap: 10px;
}

/* just styles for demo */
.grid__item {
  background-color: tomato;
  color: white;
}

<div class="grid">
  <div class="grid__item">One</div>
  <div class="grid__item">Two</div>
  <div class="grid__item">Three</div>
  <div class="grid__item">Four</div>
  <div class="grid__item">Five</div>
  <div class="grid__item">Six</div>
  <div class="grid__item">Seven</div>
  <div class="grid__item">Eight</div>
  <div class="grid__item">Nine</div>
</div>

- Vadim Ovchinnikov

---

为什么 grid-template-rows: repeat(auto-fit, 200px) 和 grid-template-columns: repeat(auto-fit, 200px) 的工作方式不同？我的意思是 grid-template-rows 只重复第一行，而 grid-template-columns 重复所有列。 - NanoNova

由于您的网格的默认宽度为其容器的100％，但默认高度为“auto”。希望这对您有帮助。 - Vadim Ovchinnikov

我不知道为什么，但是找到这个简单的属性(grid-auto-rows)非常困难。谢谢！+1 - Hafiz Temuri