Как растянуть дочерние блоки на всю ширину родительского?

Question

[Emmet1]

Есть обычный контейнер с блоками. Блоки фиксированной ширины - 200 на 200.
Нужно чтобы они всегда выглядели как на картинки снизу. То есть прилегали к краям родителя Вне зависимости от ширины родителя.

<div class="content">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>

Answer 1

[Eugene Chefranov]

.content {display: flex; justify-content: space-between; flex-wrap: wrap;}

Comments

[Emmet1]

Все бы хорошо, но в последней строке творится ад, если элементов рядов 6, а в последней строке всего два блока

[Eugene Chefranov]

Emmet1, при коде выше все элементы контейнера раскидываются по краям подгоняя равнозначное пространство между элементами. Как должен себя вести последний ряд?

[Emmet1]

Eugene Chefranov, сместиться влево наверное. Это был бы оптимальный вариант

[BerettaPiffy]

Emmet1, float, table-cell, grid

[Emmet1]

BerettaPiffy, float да, стандартный вариант. Но не совсем адаптивный. Видимо его буду использовать
а с помощью грид можно это реализовать?

[BerettaPiffy]

Emmet1, Вот потыкать можно, посмотреть что и как

[Aetae]

Emmet1, правильно grid. Но если хочется по извращаться на чистом flex - можно добавить в конец {максимальное возможное количество в строке - 1} элементов с той же шириной что и у остальных и с высотой 0px.)

Answer 2

[Lord_Dantes]

https://codepen.io/lord-dantes/pen/JjdGdYo?editors=1100