Как сделать сетку на гридах?

Question

[tehfoxen]

Как сделать такую сетку на гридах

Comments

[Денис Инешин]

А что у вас не получается? Вы можете показать свой код?

[Ankhena]

Так и сделать 3 столбца, 2 строки.
Что именно у вас не получается?

[tehfoxen]

.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
.item1 {
grid-column: 1;
  grid-row: 1 / span 2;

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

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>

</div>

Делаю так, но мне нужно вставить изображения вместо 1,2, 3, 4 и с ними все криво встает. Я так понимаю из-за размеров фоток. Как их подогнать?

[Ankhena]

tehfoxen,

Делаю так, но мне нужно вставить изображения вместо 1,2, 3, 4 и с ними все криво встает

Так проблема не в гридах, а в изображениях.
Возможно, вам поможет object-fit или просто width и/или max-width (отсюда плохо видно)