如何用grid-template-rows的repeat适配可变行数的网格行高配对需求？

嘿，我完全懂你的困扰——想要让CSS网格自动匹配「211px缩略图行+40px标题行」的重复模式，又不想因为固定重复次数导致页面底部出现多余空白，确实有点棘手。这里有几个实用的解决方案，你可以根据自己的需求和浏览器兼容情况来选择：

方案1：纯CSS（现代浏览器适用） #

利用repeat(auto-fill, ...)结合grid-auto-rows处理多余行，实现自动匹配内容的行对：

.grid-container {
  display: grid;
  /* 自动重复「211px + 40px」的行对，适配内容数量 */
  grid-template-rows: repeat(auto-fill, 211px 40px);
  /* 让多余的空行高度设为0，彻底消除空白 */
  grid-auto-rows: 0;
  /* 可选：隐藏容器内超出的内容，避免空行可能带来的微小间隙 */
  overflow: hidden;
}

说明：auto-fill会自动创建足够的行对来容纳所有网格项，多余的空行通过grid-auto-rows: 0将高度清零，不会出现空白区域。这个方法目前支持Chrome、Firefox、Edge等主流现代浏览器。

方案2：纯CSS（兼容更广泛） #

通过直接设置网格项的固定高度，让行高自动适配内容，完全避免多余空白：

.grid-container {
  display: grid;
  /* 行高自动跟随网格项的高度 */
  grid-template-rows: auto;
}

/* 缩略图项强制固定高度211px */
.grid-container .thumbnail {
  height: 211px;
}

/* 标题项强制固定高度40px，内容过长时可添加截断处理 */
.grid-container .title {
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

说明：这个方法不需要复杂的行模板设置，直接给不同类型的网格项指定固定高度，行高会自动匹配内容，既满足了你的行高要求，又不会产生任何多余空白。如果担心标题内容过长撑开行高，加上overflow: hidden等样式就能解决。

方案3：JS配合CSS（最可靠的兼容方案） #

如果需要兼容旧浏览器，或者必须严格使用行模板的重复模式，可以用JS动态计算需要重复的行对数量：

首先在CSS中定义一个CSS变量：

.grid-container {
  display: grid;
  /* 通过CSS变量动态设置重复次数 */
  grid-template-rows: repeat(var(--row-pairs), 211px 40px);
}

然后添加一段简单的JS代码：

// 获取网格容器
const gridContainer = document.querySelector('.grid-container');
// 计算网格项总数，除以2得到需要重复的「缩略图+标题」组数
const totalItems = gridContainer.children.length;
const rowPairs = Math.ceil(totalItems / 2);
// 动态设置CSS变量
gridContainer.style.setProperty('--row-pairs', rowPairs);

说明：通过JS精确计算需要的行对数量，再动态赋值给CSS变量，这样grid-template-rows就会完全匹配内容的实际行数，不会有任何多余空白，兼容所有支持CSS变量的浏览器（IE除外）。

内容的提问来源于stack exchange，提问作者Trial4life