Resizing boxes to fill empty space

Resizing boxes to fill empty space

Hello !

I am using this code  :

CSS
  1. main span{
  2. display: inline-block;
  3. height:250px;
  4. line-height:250px;
  5. margin:0px;
  6. border:1px solid #efefef;
  7.                               min-width:200px;
  8.                               max-width:350px;
  9. }
HTML
  1. <main id="main"><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span></main>
JQUERY
  1. $(document).ready(function () {
  2. var $i =  5;
  3. var $w = $('#main').width();
  4. var $iw = $w / $i;
  5. //var $tt =   $("#main .items").length;
  6. $('.items').css("width", $iw + 'px');
  7. $('.items').text( $iw );
  8. //$('#width').text( $w + ' -> ' +  $tt);
  9. });

but when resizing the screen I get a lot of empty space around the boxes

How can I do to fill the empty space  (they must have a min and max width)  ?   I can have  2 to 10  boxes in a row  no matter
they should always look like the first picture


thanks for helping