Dynamically resize objects into equal columns using css - html

Question

I am trying to create a layout that automatically re-sizes the widths of of container to fit the remaining space of the parent. Sort of like this:
The data will load in from a Database but I wasn't sure how possible this is to do. I tried to recreate this layout, before loading objects from the database but cant work out how to make the last container on each line to fill the remaining space.
CSS:
ul,li{
list-style:none;
}
ul{
width:1000px;
display:block;
height:auto;
}
li{
float:left;
margin:10px;
background:red;
height:150px;
display:block;
}
Simple loop:
for($x = 0; $x < 20; $x++){
echo '<li style="width:'.rand(150,400).'px"></li>';
}
If anyone could explain a way that I could dynamically resize the last container of each line to make it flush I would greatly appreciate it. But I don't want to use a template or a plugin as I would rather learn how to build it from scratch.

Answer 1

Bootstrap is defiantly your best shot here. Bootstrap is a grid layout using divs and used right is fully responsive.
So for example if you wanted a wider column and two smaller columns you could do:
<div class="row"><!--always size of 12 in bootstrap-->
<div class="col-md-6">
wider column content in here
</div>
<div class="col-md-3">
smaller first column content in here
</div>
<div class="col-md-3">
smaller second column content in here
</div>
</div><!--end row div-->
So if we take it mathematically: the row is always taking its own size as 12, so our col-md-6 will always dynamically scale to 50% of the rows width (6 is 50 % of 12) and a our two smaller columns will always dynamically scale to 25% of the row width (3 is 25% of 12).
Here is a great tool for generating snippets of bootstrap html code
Layitout.com
And here you can find all the bootstrap resources you might need
GetBootStrap
Grabbing their CSS is the best place to start, you can link it straight from their site in a CSS href.
Have fun.