Elastic layout - Ensuring layout always aligns

Question

I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps.

Code

http://jsfiddle.net/N3VRM/3

http://jsfiddle.net/N3VRM/3/embedded/result/

Problem

I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1% margin on the pink squares, meaning they do not align with the "testing" text.

Invalid solution

The only solution I can come up with is to put a 1% margin on all content which isn't the pink grid so that they both align (i.e on the testing text), but on my production site, this is going to make it very messy. Using javascript would also be an invalid solution

Possible solution

Possibly the way to achieve this is to use the CSS nth item rule for different resolutions like below but I can't seem to get it working correctly:

@media (max-width: 1200px) {
    .thumb:nth-child(3n+3) {
        width:21%;
    }
}

I just know there is a really smart, elegant solution to this and I can't figure it out. Points go for the cleanest, most compatible solution.

Answer 1

you could take a look at ways to justify align your boxes and use display:inline-block; instead of float or display:flex.

IT will send to far right and far left first & last box of each line. but boxes will not be dispatch on last line with same margin and will break the column look.

display:inline-block and text-align:justify:http://jsfiddle.net/N3VRM/4/

display:flex and flex:wrap and justify-content:space-between :http://jsfiddle.net/N3VRM/5/

---

But what looks close to your needs is the use of the selector nth-child(n) to count and reset specific margin to selected boxes.

So let's test : .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

http://jsfiddle.net/N3VRM/6/

these count needs to be reset and set for each mediaquerie.

See in last fiddle linked, shadow color switching with mediaquerie.