Как стилизовать и позиционировать картинки?

Question

[ByJumping]

Есть 2 блока, в каждом блоке по 2 картинки, но располагаются они в левом блоке просто горизонтально, в правом вертикально.

Постоянно все скачет, задавать фиксированную ширину это не вариант. Скину 2 примера на codeopen. В первом примере просто расположил блоки как они должны стоять, все отлично адаптивится, но если вместо блоков поставить картинки все едет.





Во втором примере с картинками поставил правому блоку высоту в 48% и выглядит норм. Но это для этих картинок, потому что они большие. Если туда вставлять разные картинки - типо 100пх или 300пх то все едет. Как должно быть скину скрином, как вот это сделать адаптивно? Так же должна быть максимальная высота для блока примерно в 300пх, сейчас я захардкодил и просто указал height: 300px, если поставить max-height то сразу картинки во весь экран соответственно.

Answer 1

[Сергей delphinpro]

<div class="grid">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}

.grid img:nth-child(1),
.grid img:nth-child(2) {
  grid-row: span 2;
}

Answer 2

[UthvfyV]

<style>.card-post__gallery {
display: block;
width: 100%;
height: 300px;
}
.card-post__gallery-left {
display: inline-block;
width: 60%;
height: 100%;
} 
img {
width: 100%;
display: block;
}
.card-post__gallery-left .image {
height: 100%;
width: 45%;
display: inline-block;
background-color: #0d47a1;
vertical-align: top;
}
.card-post__gallery-left img {
width: 100%;
height: 100%;
}
.card-post__gallery-right {
display: inline-block;
width: 38%;
height: 100%;
vertical-align: top;
}
.card-post__gallery-right .image  {
display: block;
width: 100%;
background-color: #0d47a1;
}
</style>