网格自动行重复

Question

我有一个行数可变的网格。我正在尝试使用 grid-template-rows:

设置行高

grid-template-rows: 211px 40px;

（一行是缩略图，下一行是字幕）

但是，使用此命令仅调整前 2 行的大小。我尝试使用 repeat 命令，但找不到告诉它 "repeat n times, where n is the total number of rows divided by 2" 的方法。例如，

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.

堆栈片段

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

.grid .rows {
  background: red;
}

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

网格自动行重复

grid-auto-rows repeat

html

css

grid

css-grid