How to make each item in a row only take up the needed content height?

Question

While using CSS grid layout, I cant figure out how to get each item be only the height that it needs to be. In the example, below, I want cell 5 to be the same height as 1,2,3, ie: only the height it needs. I've tried many values for grid-template-rows

.wrapper {
    border: 2px solid #f76707;
    background-color: #fff4e6;
    display: grid;
    grid-template-columns: repeat(3, minmax(33px, 1fr));
    grid-gap: 2vw;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four<BR>more<BR>more</div>
    <div>Five</div>
</div>

Answer 1

i had a pretty similar issue with a library project i had. i dont know if this is the perfect fix for it, because i dont know how this will change with sizing and such but maybe it can help you find an even better solution and at the very least its a start. so i hope it helps you.

<div id="hideFifth">Five</div>

added ID

#hideFifth {
    height: 20px;
    overflow: hidden:
}

so i just gave the element you want to hide an id and then styled the element. the most obvious problem with this being you would need a more general name and then add this to any box you want to make after. and i dont know how it would change things going down the rows. but like i said maybe this will be a good start to finding a better solution. all in all now your box is the same size and 1 2 and 3.