Сверстать блок Как на фотографии

Question

Блок выглядит следующим образом, получилось сделать через flex, что-то похожее но при добавлении картинок все ломается, и мое решение кажется неверным

[введите сюда описание ссылки][2]

.list {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
  max-width: 1300px;
}

.item {
  position: relative;
  min-width: 350px;
  height: 200px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .item {
    width: 100%;
  }
}

.item--l {
  flex: 1;
}

.content {
  flex: 1;
  height: 100%;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: #C0F3CA;
}

.item--empty {
  opacity: 0;
}

.item--row {
  overflow: visible;
}
.item--row .content {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  background: #E0D3FF;
  height: calc(200% - 8px);
  z-index: 2;
}
@media (max-width: 1100px) {
  .item--row .content {
    position: static;
    height: auto;
  }
}

<div class="list">
  <div class="item">
    <div class="content">
1
    </div>
  </div>
  <div class="item item--l">
    <div class="content">
2
    </div>
  </div>
  <div class="item item--row">
    <div class="content">
3
    </div>
  </div>
  <div class="item item--l">
    <div class="content">
4
    </div>
  </div>
  <div class="item">
    <div class="content">
5
    </div>
  </div>
  <div class="item item--empty">
    <div class="content">
6
    </div>
  </div>
</div>

Answer 1

С помощью grid

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
min-height: 300px;
}

.parent > div { background: red; }
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 1 / 3 / 3 / 4; }
.div5 { grid-area: 1 / 4 / 2 / 5; }
.div6 { grid-area: 2 / 4 / 3 / 5; }

<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>

БЛОГ НА HUSL

Сверстать блок Как на фотографии

Ответы (1 шт):