Есть идеи как это можно реализовать

Question

делаю тренировочный макет и наткнулся на такую штуку которую понятия не имею как сделать, думаю гридами но не получается

Answer 1

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.container__column1 {
  display: flex;
  flex-direction: column;
  height: inherit;
  width: 40%;
  align-items: center;
  justify-content: center;
}
.container__column1__block {
  height: 60vh;
  width: 75%;
  background: blue;
  border-radius: 1em;
}
.container__column2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: inherit;
  width: 60%;
}
.container__column2__block {
  height: 30vh;
  width: 40%;
}
.container__column2__block__content {
  display: flex;
  width: 80%;
  height: 25vh;
  background: rgba(0, 0, 255, .5);
  border-radius: 1em;
}
.container__column2__block:nth-child(2n) {
  align-self: flex-end;
  justify-content: flex-end;
}
.container__column2__block:nth-child(3n) {
  margin-left: 5%;
}

<div class='container'>
  <div class='container__column1'>
    <div class='container__column1__block'></div>
  </div>
  <div class='container__column2'>
    <div class='container__column2__block'>
      <div class='container__column2__block__content'></div>
    </div>
    <div class='container__column2__block'>
      <div class='container__column2__block__content'></div>
    </div>
    <div class='container__column2__block'>
      <div class='container__column2__block__content'></div>
    </div>
    <div class='container__column2__block'>
      <div class='container__column2__block__content'></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Есть идеи как это можно реализовать

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