Remove margin responsive thumbnail grid

Question

I creating a thumbnail grid that has a responsive 4-3-2-1 column structure: 25%, 33.33%, 50%, 100%. But i want to be able to remove the last margin of each thumbnail in every state so with 4 columns (25%,25%,25%,25%) or 3 columns (33.33%, 33.33%, 33.33%) etc. Now the last thumbnail jumps under the other thumbnails. I was trying to use :nth-child for this.

What is the best way of building a thumbnail grid with divs, unordered lists (ul) or maybe something else?

Can ayone help me with this? Thank you ;-)

Here example:

Fiddle

or

Codepen

.thumb:nth-child(4n) {
margin-right: 0;}

Answer 1

Option 1

Use box sizing . Change your margin to padding and use box-sizing: border-box; on your .thumb . This means it will take the padding and border into account when putting in percentage widths.

JSFIDDLE

Option 2

Use calc . Example:

.thumb {
   width: calc(50% - 20px);
}

JSFIDDLE

I'll let you decide which is better for you based on browser support. :)

Update

To get rid of the margin on the right, you can use nth-child , sort of what you suggested:

@media all and (max-width: 800px) and (min-width: 601px) {
    .thumb {
        width: 50%;
    }
    .thumb:nth-child(2n+0) {
        padding: 0 0 20px 10px;
    }
}

See the bottom example on this page .

JSFIDDLE