如何动态让所有grid-template-rows拥有相同高度？

你当前使用grid-template-rows时出现行高不一的情况，是因为默认行高为auto，会随内容高度自动调整。要让所有行高度保持一致且保留display: grid，可以用以下两种方案：

方案1：用1fr统一行高 #

直接通过grid-auto-rows或grid-template-rows设置行高为1fr，让所有行平分容器的可用空间，从而实现等高：

适用于不确定行数的场景 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 按实际列数调整 */
  grid-auto-rows: 1fr; /* 所有行自动适配为相同高度 */
}

适用于确定行数的场景 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); /* 明确指定行数，每行高度均等 */
}

方案2：结合minmax()确保内容适配 #

如果需要行高至少能容纳内容，同时保持所有行等高，可使用minmax(auto, 1fr)：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(auto, 1fr);
}

原理：1fr会按比例分配容器剩余空间，强制所有行拉伸至相同高度，不受单行列内容多少影响。

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