Minimize Table Cell Height in a Display Grid in CSS

Question

I am developing a website that uses a grid. Just so it looks more professional and aesthetically pleasing. I want to minimize each table size where there is no open padding on the bottom of cell. I tried to create an image of what I exactly want. The red part represents content, and the open box is just the table cell. Here is where I am currently at (this is what I don't want). What I want is no open padding on the bottom, and every element below it moves up. This is more of what I want.

Here is my code.

.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;
}