Jquery Masonry Seamless Responsive Image Grid

Question

I\'m looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I\'ve found a cou

Answer 1

The issue with fluid/responsive layouts, boxes of varying widths, and isotope/masonry appears to be a bug. If your item widths equal up to the full width of the browser window but are in decimal pixel values, there are problems.

What I ended up doing was setting three variable width columns at 19.5%, 39.5%, and 59.5% respectively. This fixed the random gap issue I was experiencing earlier (though it did introduce gutters which I'm not too stoked on).

Here it is functioning: http://cyclesdautremont.com/blog/

For more information on this bug (and hopefully a fix one day), check out the isotope github issue dedicated to it: https://github.com/desandro/isotope/issues/222

Answer 2

Voids in Isotope layouts can occur, because the Isotope items appear in a certain order (top down) in the DOM and - if there are items spanning two columns or three, or if there are items not conforming to the column width - therefore want to rearrage in that original order, when the browser is resized. This can be seen here or here (with jsfiddle) when the browser window is resized sufficiently - even such strict conformity can result in some voids at certain browser sizes. Shuffling could result in an optimal fit, but not necessarily so.

One could use sorting to order the items; for that to work, they must conform to width and height multiples of one item (with appropriate margins applied). With Isotope, you have Masonry plus much more functionality while it is similarly easy to implement. Best is to think about what the layout should do for the viewer, maybe on paper first, then mock-up an undesigned sandbox, keeping the modularity issue in mind.

UPDATE If you examine your sandbox with Google Chrome's devtools, you'll see that

1. your nav-container has no size set; it's size x=426/y=469px only depends on its content; you should set a size in CSS that conforms to the sizing scheme of your other items which, if you look the smallest common divisor, is x=240px (240(1), 480(2), 720(3)/y=120px (240(2), 360(3), 720(6)).

2. like i mentioned above, you have elements spanning multiple columns and rows; therefore at certain browser window sizes, voids will be inevitable. If you select black as #isotope-container background in the end, this will be less noticeable, as black is your bike images background colour.

3. don't know how that #twenty-seventh-letter interferes, but see the changed jsfiddle how to achieve a little bit of bleed on the right before Isotope triggers layouting. But, because of layouting (Masonry, Isotope), which is the whole purpose here, you can not have bleed at all sizes - for that, you'd need to code boxes with fluid widths also, which can be done with some extra effort.