flexbox image grid, дети имеют большой или маленький размер, не хотят мертвого пространства

Question

Имейте портфель Гэтсби / содержательный. В содержательном, каждый элемент портфеля имеет логическое значение «Featured», истина или ложь. Если элемент представлен, я хочу, чтобы он занимал 100% ширины. Если предмета нет, я хочу сказать, что это 33% ширины. Проблема в том, что я не хочу мертвого пространства. Предполагаемая настройка ниже.

Элементы поступают в хронологическом порядке, а затем я использую .map(), чтобы отобразить их на странице. Имейте небольшую троичную поговорку, если featured===true, то добавьте класс «Featured».

Есть ли решение flexbox? Пробовал сжиматься и расти, но так и не получилось, или, может быть, это js вопрос алгоритма сортировки?

Answer 1

Вы можете сделать это с помощью сетки (и grid-auto-flow )

.container {
  display: grid;
  grid: auto-flow / 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.card {
  border: 4px solid black;
  height: 150px;
}

.featured {
  grid-column: 1 / 4;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card featured"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card featured"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>