Flexbox: как растянуть элементы строки на всю ширину? ⇐ CSS

[Гость]

У меня есть сетка flexbox изображений произвольной ширины:

[img]https://i.stack.imgur .com/pfPeU.jpg[/img]


Я хотел бы растянуть элементы каждой строки на всю ширину, чтобы избавиться от пробелов — как этого добиться что с CSS?

Код: Выделить всё

justify-content

, похоже, не очень помогает. Я читал о некоторых методах JavaScript, но по возможности хотел бы их избегать.

[Отредактировано] Ожидаемый результат: пример

Код: Выделить всё

.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid .grid-item {
width: auto;
display: inline-block;
vertical-align: bottom;
float: none;
margin: 1px;
overflow: hidden;
}
.grid .grid-item .grid-in {
padding: 0;
width: auto;
height: 190px;
vertical-align: bottom;
}
.grid img {
max-width: 100%;
width: 100%;
height: auto;
padding: 0;
}

Код: Выделить всё

[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/100x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/100x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/250x190[/img]




[img]http://placehold.it/190x190[/img]




[img]http://placehold.it/100x190[/img]

Источник: https://stackoverflow.com/questions/316 ... full-width