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

Question

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

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

我知道，此模板应适用于前3行。 但是，从4行此模板无效。
我可以为所有行制作模板吗？

P.S。 此模板仅适用于第1行。

grid-template-rows: 150px;

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;