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

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

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

`<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>` `.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` достаточно удобная вещь. В противном случае придется придумывать что-то еще.

Даны `12` элементов. Сделайте из них плиточку по `4` элемента в ряд с шириной каждого элемента в `100px` и расстоянием между ними в `20px`.

Даны `12` элементов. Сделайте из них плиточку по `3` элемента в ряд с шириной каждого элемента в `150px` и расстоянием между ними в `10px`.

← →
↑