JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="lineout">
        <div class="foto">&nbsp;</div><div class="foto">&nbsp;</div><div class="foto">&nbsp;</div><div class="foto">&nbsp;</div><div class="foto">&nbsp;</div>
    </div>
</div>

hoi

CSS

#container {
      display: inline-block;
       margin:0 auto;
    padding: 0 0 10px 10px;
    width:100%;
}
.foto{
    width: 150px;
    height: 150px;
    display: inline-block; 
    *display: inline;
    *zoom: 1;
    background: #FC0;
    margin: 10px 10px 0 0;
}

#lineout {
    width: 100%;
}

JavaScript

function align() {
    // Get the overall width we're fitting into.
    var width = $('#lineout').outerWidth();
    // Get the individual item width.
    var fotoWidth = $('.foto').outerWidth();
    // Calculate how many items are likely to fit on one line.
    var nodesPerLine = Math.floor(width / fotoWidth);
    // If we have calculated more than we have, fix it.
    if(nodesPerLine > $('.foto').length) nodesPerLine = $('.foto').length;
    // Calculate how much space we have spare.
    var remainder = width - (nodesPerLine * fotoWidth);
    // Calcaulate the gap between each item.
    var gap = remainder / nodesPerLine;
    // Calculate the margin for each side.
    var channel = gap / 2;
    // Set the CSS.
    $('.foto').css({ marginLeft : channel, marginRight : channel });    
    $('#container').css('padding', 0);
}
$(document).ready(function() {
    $(window).resize(align);
    align();
});