I've been working on getting a proper fluid layout working with Masonry/Isotope. I've run into a number of snags along the way, the last of which I've been unable to solve.
My objectives were:
- Enable a fluid isotope image grid layout that resizes photos on the fly
- Have the image grid horizontally centered in the window
- Have a gutter that doesn't cause the right column to A) wrap, or B) show off-center
I began looking at this question: jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window, but while it works to solve that immediate problem, it doesn't handle gutters and multiple columns.
I managed to edit the selected answer's jsfiddle to clean it up and expand it:
(Please forgive the lack of line breaks, but jsfiddle was creating 's between columns messing up the gutter).
I've successfully managed to solve problem #1; problem #2 can be easily accomplished by creating a parent div with a set width and margin: 0 auto;; that leaves us with problem #3:
If you use css to add padding or a transparent border to each <li> elements (say, margin-right: 10px; margin-bottom: 10px; or even the equivalent using border), we run into a problem. All of a sudden the right column wraps into the next line! This, of course, is expected behaviour, and one would expect to solve it simply by applying display: inline-block; to the <li> elements (which I've done) and white-space: nowrap; to the parent element (which I commented out).
Unfortunately if you enable the nowrap, it produces the problematic behaviour that the <ul> element doesn't abide by the parent <div>'s width, and all of the images appear in one single row.
The ultimate question: How can I get this to work properly so that I've got three columns working with a gutter in between but perfectly aligned to the right and left of the parent element? I've even tried floating the images, but then there is some strange behavior with isotope.
