html - Responsive thumbnail grid equal spacing

Question

I have a grid of thumbnails:

.thumbnail-container {
          border: 1px solid red;
          float: left;
          width: 25%; (depending on screen size)
}

.thumbnail {
          display: block;
          height: auto;
          width: 200px;
          margin: 0 auto;
          padding: 0px;
}

you get the idea...

Sometimes there are 5 thumbs, sometimes 4, 3, 2... in the same row depending on the @media device screen width.

So as you can see in the picture, my problem is the horizontal spacing between the thumbnails. Since the width of each thumb-container is equal (25% in the picture) and thumbnails are centered, there is double spacing betwet 1st and 2nd, 2nd-3d, 3rd-4th. On the contrary, the 1st thumb has half of that space to the left, and the 4th has it to the right:

It's like this: 1(A)2(B)2(C)2(D)1

And I want it like this: 1(A)1(B)1(C)1(D)1

Any ideas of how to make the spacing the same?

Many thanks!

Answer 1

I made this responsive grid that does what you need using CSS. It uses media queries and nth-child().

The horizontal and vertical margins are equal.

FIDDLE

It shows you can use calculation to position grid elements with equal margins between each other. The margin between elements and window is also the same.

Code for screens wider than 751px isn't written yet though but you get the idea. Here is the code :

HTML :

<div id="container">
    <div class="wrap">
        <div class="foto">1</div>
    </div>
    <div class="wrap">
        <div class="foto">2</div>
    </div>
    <div class="wrap">
        <div class="foto">3</div>
    </div>
    ... And so on ...
</div>

CSS :

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){

    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}