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

【问题标题】：How to repeat grid-template-rows for all rows如何为所有行重复网格模板行
【发布时间】：2018-01-06 19:51:00
【问题描述】：

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

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

我知道，这个模板应该适用于前 3 行。但是，从 4 行这个模板不起作用。
我可以为所有行制作模板吗？

附：此模板仅适用于第一行。

grid-template-rows: 150px;

【问题讨论】：

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

标签： css css-grid

【解决方案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>

【讨论】：

为什么grid-template-rows: repeat(auto-fit, 200px) 和grid-template-columns: repeat(auto-fit, 200px) 工作方式不同？我的意思是grid-template-rows 只重复第一行，但grid-template-columns 重复所有列。
@NanoNova 因为您的网格的默认宽度是其容器的 100%，但默认高度是 auto。希望它对你有意义。