Images not adjusting inside the grid

Question

I got 2 columns grid with following layout:

My issue is that when I use images inside the right column (1 image inside each box)..Images overflow and whole grid kind of acts weird.

It looks something like this:

Codepen Link: https://codepen.io/kazmi066/pen/MWXGgaL?editors=1100

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: green;
  width: 100%;
  max-height: 70vh;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.col1 {
  height: 100%;
  background: red;
}

.col2 {
  height: 100%;
  background: orange;
}

.box1 {
  width: 100%;
  height: 50%;
  border: 1px solid black;
}

.box2 {
  width: 100%;
  height: 50%;
  border: 1px solid blue;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid">
  <div class="col1"></div>
  <div class="col2">
    <div class="box1"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/></div>
    <div class="box2"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
  </div>
</div>

I want the images to adjust inside the boxes perfectly without the need of custom height and width so that any size of image can work in this scenario.

Answer 1

The solution that worked for me:

• I used grid-auto-rows to create 2 rows with specific height.
• Then added span to adjust the column accordingly to cover both rows.

.grid {
  width: 100%;
  border: 1px solid red;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px 280px;
}

.col1 {
  height: 100%;
  grid-column: 1/8;
  grid-row: span 2;
  background: red;
}

.col2 {
  grid-column: 8/13;
  height: 100%;
  background: orange;
}

.col2 img:first-child {
  margin-bottom: 11px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .grid {
    grid-auto-rows: 220px 120px;
  }
  
  .col1 {
    grid-column: 1/13;
  }

  .col2 {
    grid-column: 1/13;
    grid-row: span 2;
  }
}

<div class="grid">
  <div class="col1">
    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/>
  </div>
  <div class="col2">
    <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwaG91c2V8ZW58MHx8MHx8&w=1000&q=80" alt="property"/>
    <img src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?cs=srgb&dl=pexels-binyamin-mellish-186077.jpg&fm=jpg" alt="property" />
  </div>
</div>

Final output now:

Solution-2: Found Another better solution with Grid-template-areas I guess which looks more cleaner:

.grid {
  width: 100%;
  border: 1px solid red;
  display: grid;
  gap: 14px;
  grid-template-areas: 
            "mainImage mainImage otherImage1"
            "mainImage mainImage otherImage1"
            "mainImage mainImage otherImage2"
            "mainImage mainImage otherImage2"
}
.mainImage {
  grid-area: mainImage;
}
.otherImage1 {
  grid-area: otherImage1;
}
.otherImage2 {
  grid-area: otherImage2;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid"> 
  <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" class="mainImage" /> 
  <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwaG91c2V8ZW58MHx8MHx8&w=1000&q=80" alt="property" class="otherImage1" /> <img src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?cs=srgb&dl=pexels-binyamin-mellish-186077.jpg&fm=jpg" alt="property" class="otherImage2" /> 
</div>
<h1>something else here</h1>