Использование флексбоксов для создания боксов в нужных местах

Question

Я пытаюсь добиться следующего дизайна:

Мне предложили использовать Flexbox для этого. Я пробовал некоторые подходы, но я не могу понять, как сохранить одинаковый размер ящиков. У меня есть поле data, которое содержит все необходимые данные:

[
  {
    "name": "action",
    "img": "action.jpg",
    "status": "NO"
  }
  {
    "name": "Aldi",
    "img": "aldi.jpg",
    "status": "YES"
  }
]

Но я действительно борюсь с частью CSS. Кажется, я не понимаю, как держать ящики отдельно. Я создал основной div, который будет содержать серый фон. Затем я попытался собрать данные и создать flexbox для каждого из них, но он не создает эти поля правильно. Я чувствую, что подхожу к этой проблеме неправильно. Можно ли показать, как создать эти поля для каждого из элементов данных? Пожалуйста, не показывайте, как создать кнопку, я попробую сам, я просто борюсь с телом этих блоков.

Answer 1

Мне кажется, у вас есть что-то вроде этого. Обратите внимание, что вам нужно настроить свойство flex на экранах разных размеров. Bootstrap row и columns могут помочь, если вы используете его в проекте.

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.item {
  flex: 0 0 25%;
  list-style: none;
}

.item > div {
  height: 120px;
  margin: 1rem; 
  background: rgba(250, 250, 250, 1);
}

<ul class="wrapper">
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
</ul>