заказ flexbox с изменяющимися данными

Question

У меня сложная задача на работе - для этого требуется чистое решение CSS

Я получаю массив виджетов шириной 33% или 66%.Их необходимо упорядочить в порядке их получения, но общая ширина виджетов не может превышать 100%.

На приведенном ниже снимке экрана показан порядок, в котором элементы должны заполнять экран, а цифры указывают порядок, в которомони были получены.Обратите внимание, что элемент 3 слишком велик, чтобы поместиться после элемента 2, поэтому элемент 4 (с более низким приоритетом) заполняет пустое пространство сверху

Как мне это сделать с помощью flex?Я получаю список компонентов при загрузке страницы.

Answer 1

Вы не можете сделать это с flexbox.

CSS-Grid может, хотя.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  grid-gap: .25em;
  padding: .25em;
}

.container div {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: rebeccapurple;
  font-size: 2em;
  width: 100%;
}

.span-2 {
  grid-column: span 2
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div class="span-2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>