Grid-row-3

by Ashish Mishra

HTML

<div id="bgcont">
        
        <div id="mycontainer">
            
          


        </div>
    </div>

CSS

#bgcont {

background:#222;
width:100%;
height:100%;
position:absolute;
margin:0;
 overflow:hidden;
 
    background:#222 url('/images/noise1.png') repeat;
    z-index:10000;
   
     display:flex;
}

#mycontainer {
white-space:nowrap;
 height:500px;
 width:100%;
 overflow-x:auto;
 overflow-y:hidden;
}
.files {
    width:70px;
      display:inline-block;
    border: 1px solid #606060;
   transition: all 500ms ease;
   background-size:contain;
   background-position:0 0;
height:50px; margin:3px 5px 3px 5px ;
   background-color:#fff;
   overflow:hidden; 

    }

JavaScript

totln = 10;
var to = Math.round(totln / 3);
for(i=0;i<=totln;i++){
    var div = $('<div/>');
 div.attr('class', 'files');
  div.appendTo('#mycontainer');
 if(i == to){
     var br = $('<br/>');
     br.insertAfter(div);
     to=to*2;
 }
}

// keepmid()

   //window.onresize = keepmid;
     
  
function keepmid(){
 var padfiles = ($(window).height() - 168) / 2; //for now
   
    $('#mycontainer').css({ 'padding': (padfiles+'px') + ' 20px ' + ((padfiles-50)+'px') + ' 100px' });
}