How to make isotope columnWidth work when first item is 2x the width of other items?

Question

http://isotope.metafizzy.co/docs/help.html says:

First item breaks Masonry layout

With Masonry layout mode If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set columnWidth option. Without columnWidth set, the Masonry layout mode will use the width of the first item for the size of its columns.

$('#container').isotope(
  masonry: {
    columnWidth: 220
  }
});

And this is what I'm currently doing. However I would like to have some CSS media queries that change the columnWidth. So if my first Isotope-item would have the normal 1x width, I could just specify the width of the items in the CSS and Isotope would take the columnWidth from there and work. But because my first item has 2x width, I have to specify the column width like in the code above, and of course then I can no longer change it with CSS.

So is it possible to for example:

• Make isotope take the columnWidth from the second item that has 1x width?
• Make some kind of hack so I would in fact have a 1x wide item as the first one but would set hide it with display:none or something?
• Set the Isotope columnWidth to take the width of the first item (which is 2x wide) minus 10px and divide by 2?

Answer 1

You could just use CSS and media queries to set the size of your elements, then access that value in Javascript and use it to set the column width:

var colWidth = $('.column-width-isotope-element').width();

$('#container').isotope(
  masonry: {
    columnWidth: colWidth
  }
});

That way, the media query will be processed before isotope is initialized, and then it read the value of the column width (replace .column-width-isotope-element with whatever your selector is for a single-column width isotope element) and initialize isotope with that property.