Auto-growing margins when screen width get stretched

Question

I have a list (<ul />) that I try to display as a grid. The cells have a fixed width (let's say 100px): the number of cols and rows depends then on the screen resolution.

When the screen has a large width, there are many columns but few lines:

   ______________________________________________________________
  |   ___________    ___________    ___________    ___________   |
  |  |           |  |           |  |           |  |           |  |
  |  |    #1     |  |    #2     |  |    #3     |  |    #4     |  |
  |  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |
  |  |           |  |           |  |           |  |           |  |
  |  |___________|  |___________|  |___________|  |___________|  |
  |   ___________                                                |
  |  |           |                                               |
  |  |    #5     |                                               |
  |  |<- 100px ->|                                               |
  |  |           |                                               |
  |  |___________|                                               |
  |______________________________________________________________|

When the screen has a small width, there are few columns but many lines:

               ________________________________
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #1     |  |    #2     |  |
              |  |<- 100px ->|  |<- 100px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #3     |  |    #4     |  |
              |  |<- 100px ->|  |<- 100px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________                  |
              |  |           |                 |
              |  |    #5     |                 |
              |  |<- 100px ->|                 |
              |  |           |                 |
              |  |___________|                 |
              |________________________________|

This is actually almost working: see this fiddle.

Almost, because as you can notice, when you're stretching the width, a blank space may appear on the right of the grid. This is because of the float: left CSS property, and is quite understandable.

But, is there any way to distribute this blank space between the cells, i.e. automatically increase the margins between the cells, until there is enough space to fit a new cell?

In other words, there is currently a fixed margin of 15px, and I'm looking for a kind of min-margin of 15px, that auto-grows while stretching the width, and goes back to 15px once a new cell fitted the first row.

To illustrate, instead of:

 ___________________________________________________________________
|   ___________    ___________    ___________    ___________        |
|  |           |  |           |  |           |  |           |       |
|  |    #1     |  |    #2     |  |    #3     |  |    #4     | BLANK |
|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->| SPACE |
|  |           |  |           |  |           |  |           |       |
|  |___________|  |___________|  |___________|  |___________|       |
|   ___________                                                     |
|  |           |                                                    |
|  |    #5     |                                                    |
|  |<- 100px ->|                                                    |
|  |           |                                                    |
|  |___________|                                                    |
|___________________________________________________________________|

Having something like:

 ___________________________________________________________________
|    ___________     ___________     ___________     ___________    |
|   |           |   |           |   |           |   |           |   |
|   |    #1     |   |    #2     |   |    #3     |   |    #4     |   |
|   |<- 100px ->|   |<- 100px ->|   |<- 100px ->|   |<- 100px ->|   |
|   |           |   |           |   |           |   |           |   |
|   |___________|   |___________|   |___________|   |___________|   |
|    ___________                                                    |
|   |           |                                                   |
|   |    #5     |                                                   |
|   |<- 100px ->|                                                   |
|   |           |                                                   |
|   |___________|                                                   |
|___________________________________________________________________|

See, the margins are larger in the second illustration, so there is no blank space anymore.

Is there any solution?

Please note that the #5 cell has to be left-aligned too, i.e. an align-center CSS property won't suit my needs (as far as I know).

Moreover, I'll be using jQuery 1.10 and Bootstrap 3, so any solution using one (or more) of these libraries is also welcomed ;)

Answer 1

I created a jQuery script that fixes your problem. See this fiddle. I wrote the script where you do not have to change it at all. You just set your minimum margin as the margin in the CSS and add as many <li> elements you want.

function setMargin() {
  ulWidth = $('ul').innerWidth();
  boxWidth = $('li').outerWidth();
  boxMargin = parseInt($('li').css('margin'));
  maxBoxNum = $("ul li").length;
  boxNum = Math.floor((ulWidth / (boxWidth + boxMargin)));
  totalMargin = ulWidth - (boxNum * boxWidth);
  eachMargin = totalMargin / (boxNum + 1);
  if (eachMargin < boxMargin) {
    boxNum -= 1;
    totalMargin = ulWidth - (boxNum * boxWidth);
    eachMargin = totalMargin / (boxNum + 1);
  }
  if (boxNum > maxBoxNum) {
    boxNum = maxBoxNum;
    totalMargin = ulWidth - (boxNum * boxWidth);
    eachMargin = totalMargin / (boxNum + 1);
  }
  $('li').css('margin-left', eachMargin);
}

$(document).ready(function() {
  setMargin();
});

$(window).resize(function() {
  setMargin();
});

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  width: 100px;
  height: 100px;
  margin: 15px 0;
  padding: 0;
  border: solid 1px black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>#1</li>
  <li>#2</li>
  <li>#3</li>
  <li>#4</li>
  <li>#5</li>
</ul>