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;}
these count needs to be reset and set for each mediaquerie.
See in last fiddle linked, shadow color switching with mediaquerie.