Responsive design with jQuery Isotope and CSS Media-queries

Question

I'm currently trying to build a responsive design and would need some help...

Basically:

1. a #wrapper DIV contains thumbnails displayed in grid
2. the grid is built using jQuery Isotope plugins applied on .thumb DIVs
3. outside and inside margins/paddings are fixed values I defined as I want them to be the same no matter of the device width

I want the thumbs width to fit the remaining space. I'd prefer to do it with CSS as I'm not sure that doing design with jQuery is a good thing (what about users who has disabled JS?).

Fortunately Isotope allows not defining fixed values in the JS code, this way:

$('#wrapper').isotope({
  itemSelector: '.thumb',
    masonry: {
      columnWidth: $('#wrapper').find('.thumb')[0],
      isFitWidth: true,
      gutter: 60
    }
});

My CSS looks like this:

#wrapper {
  padding: 15px 0;
}

.thumb {
  width: ?;
}

The CALC() function of CSS3 would be a good solution but it's not cross browser unfortunately.

Which solution would you think of? Thank you much!

Illustration (blue = fixed widths, black = relative widths)

--- edit: more info ---

Of course the grid is different depending on the device. I defined 3 states:

• mobile (.thumb under each other)
• tablet (2 columns)
• desktop (3 columns)

Answer 1

Without using display: flex;, which can be a pain to support on older browsers, you can use percentage widths and a wrapper that had a negative margin to remove the padding on the edges - see here.

Firstly you will need to use box-sizing: border-box;, which is supported back to IE8. The key then is to have a padding of half of your 60px on the left and right of each thumb container (creating 60px total between them). Obviously this leaves a 30px gap to the left and right of the thumbs where they meet the wrapper. You can enclose the thumbs in a div that had a negative margin of this 30px i.e. margin: 0 -30px; to "pull" the thumbs back out to the wrapper edges.

EDIT added some breakpoints.

HTML (in this example .thumb__inner is actually your thumbnail)

<div class="wrapper">
    <div class="wrapper__inner">
        <div class="thumbs cf">
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
        </div>
    </div>
</div>

CSS

*, :before, :after {
    box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.wrapper {
    background-color: blue;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

.wrapper__inner {
    width: 100%;
}

.thumbs {
    margin: 0 -30px;
}

.thumb {
    float: left;
    padding: 30px;
    width: 33.33333%;
}

.thumb__inner {
    background: red;
    height: 100px;
}

@media all and (max-width: 1200px) {
    .thumbs {
        margin: 0;
        padding: 15px;
    }

    .thumb {
        padding: 15px;
        width: 50%;
    }
}

@media all and (max-width: 600px) {    
    .thumb {
        width: 100%;
    }
}

Answer 2

As Jochen Schultz suggested, you could use display: flex for that:

HTML:

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS:

#wrapper {
    background: #74C8FC;
    padding: 0 15px;
    display: flex;
}
#wrapper>div {
    background: black;
    color: white;
    flex-grow: 1;
    flex-basis: 0;
    height: 15em;
}

#wrapper>div:nth-child(2) {
    margin: 0 60px;
}

DEMO

Responsive design

To make this code responsive, you should define your breakpoint. In my next example it's 600px. The flex property is then removed from the #wrapper, making it display the blocks under each other.

@media screen and (max-width: 600px ) {
    #wrapper {
        display: block;
    }
    #wrapper>div,
    #wrapper>div:nth-child(2) {
        margin: 0 0 1em 0;
    }
}

DEMO 2