Проблемы плиточки на флексах в CSS

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

А вот вторая проблема возникнет, если количество блоков такое, что в последнем ряду будет недостаточное количество блоков. В этом случае последний ряд будет выглядеть отвратительно:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Получается, что даже по горизонтали значение space-between работает плохо в нашем случае.

Резюмируем: если количество ваших потомков всегда постоянно и нормально помещается в родителя, то плиточка на space-between достаточно удобная вещь. В противном случае придется придумывать что-то еще.