CSS Grid：如何让网格内的项目拥有独立高度

我在使用CSS Grid布局时遇到问题，网格容器属性如下：

display: grid;
grid-template-columns: repeat(4, minmax(300px, 1fr));
grid-template-rows: 300px 300px auto auto auto;

我已将前两行设为固定高度300px，但希望后续行的每个项目高度为min-content，即各行项目高度相互独立。然而目前同一行的项目会拉伸至该行最高项目的高度。

期望实现的布局：

当前实现的效果：

方法一：从行定义根源解决 #

修改网格容器的行配置，只固定前两行高度，后续行通过grid-auto-rows设置为内容自适应高度：

display: grid;
grid-template-columns: repeat(4, minmax(300px, 1fr));
grid-template-rows: 300px 300px; /* 仅定义前两行固定高度 */
grid-auto-rows: min-content; /* 后续自动生成的行高度匹配自身内容 */

这个方法会让Grid自动创建的每一行高度仅容纳对应单元格的内容，彻底避免同一行单元格高度强制统一的问题。

方法二：视觉上实现独立高度（保留原行结构） #

如果需要保留原有的grid-template-rows定义，可以给第三行及以后的网格项目设置顶部对齐：

/* 前两行共8个项目，第9个开始属于第三行 */
.grid-item:nth-child(n+9) {
  align-self: start;
}

注意：这个方法只是让项目在单元格内顶部对齐，单元格本身仍会保持该行最高元素的高度，仅视觉上呈现项目高度独立的效果，适合不需要修改行结构的场景。

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