html - 在 CSS 中最小化显示网格中的表格单元格高度

Question

我正在开发一个使用网格的网站。只是让它看起来更专业和美观。我想最小化单元格底部没有开放填充的每个表格大小。我试图创建一个我真正想要的图像。红色部分代表内容，打开的框就是表格单元格。 这是我目前所处的位置（这是我不想要的）。我想要的是底部没有开放的填充，并且它下面的每个元素都会向上移动。这更多是我想要的。

这是我的代码。

.grid {
    display: grid;
    grid-gap: 24px;
    color: #291F1E;
    background-color: none;
    height: auto;
    width: calc(100% - 48px);
    max-height: auto;
    max-width: 1440px;
    position: relative;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (orientation: landscape) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (orientation: portrait) {
    .grid { grid-template-columns: repeat(1, 1fr); }
}

.card {
    height: auto;
    width: auto;
    background-color: #F7F5FA;
    color: #291F1E;
    position: relative;
    padding: 24px;
    overflow: hidden;
    transition: 0.5s transform;
}