I have a flexbox grid of random width images:
Image may be NSFW.
Clik here to view.
I would like to stretch elements of each row to full width in order to get rid of white-space - how can I achieve that with CSS?justify-content doesn't seem to help much. I have read about some JavaScript techniques but I would like to avoid it if possible.
[Edited] Expected result: example
.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;}<div class="grid"><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/190x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/250x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/100x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/190x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/250x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/190x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/100x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/190x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/250x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/190x190" alt=""></div></div><div class="grid-item"><div class="grid-in"><img src="http://placehold.it/100x190" alt=""></div></div></div>