JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="lineout">
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
        <div class="foto"></div>
    </div>
</div>

CSS

#container {
      text-align: center;
      display: inline-block;
      margin:0 auto;
}
.foto{
      float:left;         
      width: 150px;
      height: 150px;
      display: inline-block;
      background: #FC0;    
}

#lineout {
    text-align:justify; 
}

JavaScript

function resize(){
    var sizeOfImg = 150;
    var windowWith = document.body.offsetWidth;
    var widthRest = windowWith%sizeOfImg;
    var marginVal = widthRest/(Math.floor(windowWith/sizeOfImg)+1);
    var lineout = document.getElementById('lineout');
    lineout.style.paddingLeft = marginVal+'px';
    lineout.style.paddingTop = marginVal+'px';
    var fotos = document.getElementsByTagName('div');
    for(var i=0, length = fotos.length;i<length; i++){
        if(fotos[i].className === 'foto'){
            fotos[i].style.marginRight = marginVal+'px'; 
            fotos[i].style.marginBottom = marginVal+'px';        
        }       
    }
}
resize();
window.onresize = function(e){resize();};