Keep unknown number of divs centered, max 4 per row

Question

I have a simple problem, yet I can't figure it out by myself.

In short: there are an unknown number of elements which I have to position in the page, max. 4 elements per row, yet still centered. This image gives you a hint (I've set it up for the sake of example):

Detailed: On the image above I covered the different scenarios. So for example if there would be 5 elements total, the first and the last row should be used (4 + 1 circles). If there would be 10 items, then two times the first row and once the third (4 + 4 + 2 circles)... You get the idea. The elements (images and names are different in real-life) are retrieved from a database table in a specific order.

From a mathematical point of view, there is a pattern I think, thus it could be solved from a function in php. Since I am using Zurb Foundation 5 for the front-end, which I'm new at, one might expect that there is an easy solution using... the block grid maybe?! Here is the code for the first row (4 circles):

<div class="row" id="circle4">
    <div class="small-3 large-2 large-offset-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">electrocasnice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">cosmetice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">mobilier</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">parfumuri</h2>
    </div>
    <div class="small-3 large-2 columns text-center"></div>
</div>

The other cases (3/2/1 circles per row) are basically the same, slightly changing the offset. I've could also float the elements, giving a fixed width to the parent, but that's not possible, since it's a responsive design.

Anyway, how can I achieve this, from either PHP or Foundation?

Thanks in advance.

Update: Here is the fiddle with the example, so you can understand better

jsfiddle

Answer 1

Give width & text-align to your .row div

.row{
    display:block;
    max-width:1000px;
    text-align:center;
    margin:0 auto;
}

Then make your circles inline block elements

.small-3{
    display:inline-block;
    width:200px;
    margin:0 25px 25px;
}

Width of .row div should be equal to resulting width of 4 cirlce. In above example it is 1000 since (200 + 25 + 25)*4 = 1000. Use your width here.

Answer 2

You have to set the width of the divs with the circles, make them inline-blocks and center the parent div.

#circle4 {
    text-align: center;
}

#circle4 > div {
    display: inline-block;
    width: 240px;
    height: 240px;

    /**
     * Update
     */
    float: left;
}

#circle4 > div:nth-of-type(4n) {
    clear: right;
}

Answer 3

In order to keep 4 items in one row maximum, you have to give them a % width so only 4 elements can fit horizontaly like this :

CSS :

#circle4{
    text-align: center;
}

.small-3{
    display:inline-block;
    width:23%;
}

You can't fit more that 4 23% width items in one row because :

4*23 = 92%

which fits in 100% and

5 * 23 = 115% 

which can't fit in 100%

---

If you want to go one step further and make the content of your divs (images) responsive as well, you should add this CSS :

.grow img{
    width:100%;
    height:auto;
}

DEMO