如何使用grid-template-rows或grid-auto-rows显式定义CSS Grid的最后一行？

首先直接回应你的核心疑问：

仅通过grid-template-rows或grid-auto-rows这两个属性，无法直接定位并定义最后一行或者任意第n行的尺寸。原因很明确：

• grid-template-rows是用来定义显式网格轨道的，需要明确指定行数和对应尺寸，没法动态匹配最后一行（尤其是网格项数量不固定的场景）；
• grid-auto-rows是用来定义隐式网格轨道的统一默认规则，它会给所有自动生成的隐式行套用相同尺寸，无法针对某一行单独设置例外。

接下来针对你的具体需求——让包含按钮的最后一行高度自适应按钮大小，其他行保持网格中最高行的高度——给出两种实用的CSS解决方案：

方案1：伪类+重置网格项约束（适配动态行数） #

你的现有代码里，网格项默认有min-height: 50px，隐式行尺寸设为1fr。我们可以给最后一个网格项单独重置样式，让它的高度跟随内容，同时不影响其他行的高度：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr; /* 其他隐式行保持最高行高度 */
}

.grid > div {
  border: 1px solid green;
  width: 300px;
  min-height: 50px;
}

/* 单独处理最后一个带按钮的网格项 */
.grid > div:last-child {
  min-height: auto; /* 取消默认最小高度限制 */
  height: auto; /* 高度完全跟随按钮内容 */
  align-self: start; /* 确保内容顶对齐，避免行内留白 */
}

设置后，最后一行的高度会自动匹配按钮的实际高度，其他行依然保持1fr（即和网格中最高行一致的高度）。

方案2：显式定义行尺寸（适合固定行数场景） #

如果你的网格项数量是固定的，也可以直接用grid-template-rows显式定义所有行的尺寸，把最后一行设为auto：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr auto; /* 前4行设为1fr，最后一行设为auto */
}

这个方案的局限性是，当网格项数量变化时，需要手动修改grid-template-rows的定义，只适合内容固定的场景。

补充：针对任意第n行的设置思路 #

如果需要针对任意第n行调整样式，同样无法仅通过grid-template-rows或grid-auto-rows实现，但可以通过两种方式达成效果：

• 给目标网格项添加自定义类，通过grid-row属性指定它所在的行，再单独设置样式；
• 使用CSS的:nth-child(n)伪类定位第n个网格项，调整它的高度或对齐方式（注：这里是定位网格项而非直接修改行轨道尺寸，但视觉效果一致）。

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