How do I allow the user to set the number of columns in a grid image layout?

Question

What are some ways I could achieve this layout? I'm going to have a grid of images. Each image will be the same size. I'd like to scale the images up and down based on a user setting which defines the number of columns in the grid. The user setting will be stored in HTML5 local storage.

I've looked at Masonry, but I wonder if that might be overkill since all the images are the same size and the grid will be uniform. Masonry lets me define the column width, which can get me where I need to be, but I'd love something that let me define the number of columns directly. I've also considered using Flexbox for the layout, but I'm not sure how to then change the number of columns with a user-selectable setting. I want to go as lightweight in terms of development overhead as possible with this solution.

Here are some images to help visualize what I want. Here, the user has selected a 5-column layout.

Here are 4- and 3-column layouts.

Answer 1

If your number of options is known, then you can create a container style for each scenario.

.five-col .col {
 float: left;
 width: 20%;  
}

And structure your html as...

<ul class="five-col">
   <li class="col"> image </li>
   ...
</ul>

Create a new container style for each column layout, eg. .four-col .eight-col and just toggle between them.

This does require you to know ahead of time the number of columns you will allow them to choose between, but an 'n' solution might allow the user to create something silly like 20+ columns so vetting the options ahead of time has it's advantages.

If you are interested in a framework that gives you something similar, check out http://unsemantic.com/ or http://960.gs/.

Answer 2

Id do it like this:

*
{
     -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    margin:0;
    padding: 0px;
}

.gallery
{
    padding: 15px;
    margin:0;
    list-style: none;
    overflow: hidden;
}

.gallery > li
{
    margin: 0px;
    padding: 2.5px 5px;
    float: left;
    text-align: center;
}

.gallery > li img
{
    max-width: 100%;
}

.gallery.items2 > li
{
    width: 50%;
}

.gallery.items3 > li
{
    width: 33.333%;
}

.gallery.items4 > li
{
    width: 25%;
}

.gallery.items5 > li
{
    width: 20%;
}

.gallery.items6 > li
{
    width: 16.666%;
}

Some jQuery (or JS)

$("#grid-range").change(function(){
    var griditems = $(this).val();
    $("#gallery").removeClass("items2 items3 items4 items5 items6");
    $("#gallery").addClass("items"+griditems);
});

This HTML:

<input type="range" min="2" id="grid-range" max="6" value="2" step="1" name="power" />

<ul id="gallery" class="gallery items2">
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
</ul>

Here is a demo: http://jsfiddle.net/eEnkf/4/