I don't know how to maintain the height of an image in a masonry when the resolution of the screen changes

I have created this masonry on my website using CSS (picture 1).

It appears ok on my screen but when I minimize the browser window the height of the large image on the left doesn't match the height of the column on the right (picture 2). How can I fix this?

picture 2.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
.small_1 { grid-area: small_1; }
.small_2 { grid-area: small_2; }
.small_3 { grid-area: small_3; }
.large { 
    grid-area: large;

}
.medium_1 { grid-area: medium_1; }
.medium_2 { grid-area: medium_2; }


.grid-container {
    
    
  display: grid;
  grid-template-areas:
    'small_1 small_1 small_2 small_2 small_3 small_3'
    'large large large large medium_1 medium_1'
    'large large large large medium_2  medium_2 ';
 grid-row-gap: 30px;

  padding: 62px;
}

.grid-container > div {
  text-align: center;
}

</style>

Solution

It's most likely that your image isn't filling up the grid container up fully. To see this add a border to your child divs (just pop a border: 1px solid red; or similar to your .grid-container > div rule. There are a few ways around this. The easiest is to set your image width and height to be 100% of the container (see example below). If you want to set the size of your grid child divs but still want to have the image fill the container then you can also look at object-fit. object-fit: cover is quite popular as it maintains the image aspect ratio, it fills the parent but clips it.

.small_1 {
  grid-area: small_1;
}
.small_2 {
  grid-area: small_2;
}
.small_3 {
  grid-area: small_3;
}
.large {
  grid-area: large;
}
.medium_1 {
  grid-area: medium_1;
}
.medium_2 {
  grid-area: medium_2;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "small_1 small_1 small_2 small_2 small_3 small_3"
    "large large large large medium_1 medium_1"
    "large large large large medium_2  medium_2 ";
  gap: 30px;
  padding: 62px;
}

.grid-container > div {
  text-align: center;
  border-radius: 1.5rem; 
  overflow: hidden;
   
}

/* added this - make all items 100% of the width and height of the parent */
img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="grid-container">
  <div class="small_1"><img src='https://picsum.photos/id/85/300/300'></div>
  <div class="small_2"><img src='https://picsum.photos/id/85/300/300'></div>
  <div class="small_3"><img src='https://picsum.photos/id/85/300/300'></div>
  <div class="large"><img src='https://picsum.photos/id/85/300/300'></div>
  <div class="medium_1"><img src='https://picsum.photos/id/85/300/300'></div>
  <div class="medium_2"><img src='https://picsum.photos/id/85/300/300'></div>
</div>