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

[Anonymous]

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


Мне хотелось бы растянуть элементы каждой строки на всю ширину, чтобы избавиться от пробелов. Как мне добиться этого с помощью 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]https://placehold.co/190x190[/img]




[img]https://placehold.co/250x190[/img]




[img]https://placehold.co/100x190[/img]




[img]https://placehold.co/190x190[/img]




[img]https://placehold.co/250x190[/img]




[img]https://placehold.co/190x190[/img]




[img]https://placehold.co/100x190[/img]




[img]https://placehold.co/190x190[/img]




[img]https://placehold.co/250x190[/img]




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




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

Подробнее здесь: https://stackoverflow.com/questions/316 ... full-width