grid-auto-rows重复

Question

我有一个行数可变的网格。我尝试使用grid-template-rows设置行的高度：

grid-template-rows: 211px 40px;

（一行包含缩略图，以下内容包含字幕）。

Hohwever，使用此命令只会调整前两行的大小。我尝试使用repeat命令，但我找不到告诉它的方法＆＃34;重复n次，其中n是总行数除以2＆＃34;。例如，

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

仅重复3次。如果我使用repeat(100, 211px 40px)，当真实行结束时，我会得到不需要的空格，最后会填满页面。

有没有办法重复n次而不是给定值？

Answer 1

使用grid-auto-rows代替grid-template-rows。

  

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.

Stack Snippet

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-auto-rows: 210px 40px;
  grid-gap: 10px;
}

.grid .rows {
  background: red;
}

＆＃13;

<div class="grid">
  <div class="rows"></div>
  <div class="rows"></div>
  <div class="rows"></div>
  <div class="rows"></div>
  <div class="rows"></div>
  <div class="rows"></div>
</div>

＆＃13;

＆＃13;

＆＃13;