如何让Grid布局容器内的元素拥有各自的特定高度？

当前容器效果如上，网格里的最后一个元素（类表格结构）显示异常，原因是它继承了所在行的最大高度。我希望该元素呈现为如下效果：

请问在应用了grid布局的bodyContainer中，应该使用什么CSS属性实现需求？

我当前使用的CSS代码如下：

.bodyContainer{
    margin-top: 3rem;
    padding: 0rem 2rem 0rem 2rem;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    justify-content: space-between;
}

可以通过以下两种方式解决：

1. 给容器添加align-items: start
   Grid布局默认的align-items值是stretch，会让网格项拉伸填充所在行的高度。设置为start后，所有网格项都会在垂直方向靠顶部对齐，不会继承行的最大高度。修改后的代码：

.bodyContainer{
    margin-top: 3rem;
    padding: 0rem 2rem 0rem 2rem;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    justify-content: space-between;
    align-items: start;
}

2. 单独给异常元素设置align-self: start
   如果不想影响其他网格项的对齐方式，只针对这个类表格结构的元素调整，可以给它添加align-self: start属性，覆盖容器的默认对齐规则：

.table-like-element { /* 替换为你实际的类名 */
    align-self: start;
}

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