Responsive Grid image Посмотреть на 3 изображения

Question

В настоящее время я пытаюсь создать сайт, на котором я хочу показать 3 изображения.

Эти 3 изображения имеют одинаковый размер, но должны отображаться следующим образом:

|---------| |---------|
|         | |         |
|         | | image 2 |
|         | |         |
|         | |---------|
| image 1 | 
|         | |---------|
|         | |         |
|         | | image 3 |
|         | |         |
|---------| |---------|

Я также хочу, чтобы сайт реагировал на изменение размера браузера, чтобы изображения оставались в той же сетке, но становились все меньше или меньше.

Что я уже пробовал:

Использование сетки:

.gridcon {
    margin-left: 320px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 960px 960px;
}

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

При этом размеры самих изображений изменяются, но не размеры (то есть, я получаю меньше отображаемого изображения, все еще используя ту же область экрана)

Использование flexbox:

.main {
  margin-left: 320px; /* Same as the width of the sidenav */
  padding: 0px 0px;
  display: flex;
  align-content: flex-start;
  height: 100%;
}

.main .column1 {
    height: auto;
  padding: 0px 5px;
}

.main .column1 img {    
}

.main .column2 {
  padding: 0px 5px;
}

.main .column2 img {    
height: 50%;
    display: block;
  padding: 0px 0px;
  margin-top: 0px;
}

Ну, я либо не могу получить нужный макет, либо не могу изменить его размер. Вместо изменения размера изображения переходят в новую строку.

Answer 1

Я не эксперт по CSS Grid, но я думаю, что это может вам помочь. Пожалуйста, попробуйте.

Вариант Flex

html, body {
  padding: 0;
  margin: 0;
}

.item-a {
  grid-area: side-left;
}

.item-b {
  grid-area: side-right-up;
}

.item-c {
  grid-area: sider-right-down;
}

.container {
  display: grid;
  grid-template-columns: calc(50% - 15px) calc(50% - 15px);
  grid-template-rows: calc(50% - 15px) 50%;
  grid-template-areas:
    "side-left side-right-up"
    "side-left sider-right-down";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

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

<div class="container">
  <div class="item-a">
    <img class="" src="https://source.unsplash.com/random" alt="">
  </div>
  <div class="item-b">
    <img src="https://source.unsplash.com/random" alt="">
  </div>
  <div class="item-c">
    <img src="https://source.unsplash.com/random" alt="">
  </div>
</div>