Grid box height is always extending when I want it to be relative to what I put inside it

I have three boxes inside my grid, each box is changing in height depending on what’s inside it. How do I make it so each box inside the grid is relative inside to what I put in it?

css:


.grid {

    border: black solid 2px;

    background-color: #050A30;

    margin: auto;

    padding: 10px;

    display: grid;

    width: 100%;

    grid-template-columns: 1fr 1fr 1fr; /*Or, grid-template: 1fr 1fr ROWS   /    1fr 1fr COLUMNS;*/

    grid-template-rows: minmax(50px, 100px) 1fr 1fr 1fr;    /*Or, grid-template: repeat(2, 1fr) ROWS    /   repeat(2, 1fr) COLUMNS;*/

    grid-gap: 10px

}

/*Without minmax, the items within our grid will change the size of the grid to fit that information.

            So, if we want out grid size to not change based on what's within it, we have to set a minmax*/

.box {

    font-family: monospace;

    color: #F5F5F5;

    font-size: 20px;

    border: dodgerblue solid 1px;

    padding: 10px;

    text-align: center;

    

}

HTML:


<div class="grid">

  <div class="box a" style="grid-row: 1 / 3;"><img src="./Pictures/what's up with teck.png" style="width: 100%;"></div>

  <div class="box b" style="grid-row: 6 / 12;"><img src="./Pictures/Title.png" style="width: 100%;"></div>

  <div class="box c" style="grid-row: 1 / 3;"><img src="./Pictures/carlos-vaz-KP4bxnxAilU-unsplash.jpg" style="width: 100%;"></div>

</div>