Elements not aligning correctly with responsive layout

[metafizzy]

Elements not aligning correctly with responsive layout

[desandro]

Are you using ImagesLoaded ? See http://packery.metafizzy.co/appendix.html#imagesloaded

[jurgen-ll]

Hi David,

Thanx for the solution.
The imagesLoaded does solve the initial problem, but does not solve the white/empty areas. I still have some random images/containers that won't fit tight together. It really looks like there is a rounding, at some places it's off by 1 pixel which pushes the images to a new row..

[desandro]

If you have a live URL, I can try diagnosing what is causing that empty space. Or, you can try replicating this bug in jsFiddle. See Submitting issues

[jurgen-ll]

Yeah sure. Could you give me an IP address so I can give you access? The dev env is closed and only open to specific ip's. You can email me at [email protected] or can I sent you a mail somewhere?

I've sent you an email ;-)

[desandro]

We're dealing with a collection of square images, in a responsive grid. See http://codepen.io/desandro/pen/JgboG

Gaps will appear sometimes when you resize the window.

In this case the grid has seven columns.

.item { width: 14.28571428571429%; /* 1/7 * 100 */ }
.item.big { width: 28.57142857142858%; /* 2/7 * 100 */ }

Even with values with 10 decimal place, there can be mis-alignments of one pixel since the browser is not working with pure fractions, but with decimals.

We can try to prevent misalignment by using columnWidth and rowHeight options.

See http://codepen.io/desandro/pen/wLrFe

Let's create an element that will be used for these sizes.

<div class="grid-sizer"><img src="http://lorempixel.com/200/200/?1" /></div>

Size the element and item elements with CSS. Here, as Divya recommends, I am using 3 decimal places for percentage widths, and using calc() values to overwrite that, for code that's easier to understand.

/* width used for columnWidth */
.grid-sizer, .item {
  width: 14.285%;
  width: -webkit-calc( 1/7 * 100% );
  width: calc( 1/7 * 100% );
}

.grid-sizer img,
.item img {
  display: block;
  width: 100%;
}

.item.big {
  /* just a little smaller than 2/7 */
  width: 28.570%; 
  width: -webkit-calc( 2/7 * 99.5% );
  width: calc( 2/7 * 99.5% );
}

The size for .item.big is just a fraction less than its proper width, so that it always fits within 2 columns. Setting calc( 2/7 * 100% ) can sometimes result with the item taking more than 2 columns.

Now the size of .grid-sizer can be used for element-sizing options

var container = document.querySelector('.packery');
var pckry;
// using imagesLoaded http://desandro.github.io/imagesloaded
imagesLoaded( container, function() {
  pckry = new Packery( container, {
    columnWidth: '.grid-sizer',
    rowHeight: '.grid-sizer',
    itemSelector: '.item'
  });
});

---

I realize this solution is not perfect. But I feel it's the best way to address the issue. Using percentage widths can be unpredictable.

[jackfaulkner]

I think I encountered a similar issue when using Packery in a fluid layout, 1px gaps would sometimes appear between items on both horizontal and vertical axis. The items in the grid used padding-bottom to scale proportionally based on the width of the window.

In the end, we solved it by rounding-up the width of the Packery container to a value divisible by the number of columns in the grid (in this case, 14). As this number was wider that the browser window, we then offset by half the difference ((gridWidth - windowWidth) / 2) on both sides. The offset is usually only a few pixels and there are no gaps! See it at the bottom of this page: http://bsstc.com.au

[desandro]

@jackfaulkner Thanks for proposing this fix. I've put together a simplified example on CodePen:

http://codepen.io/desandro/pen/dIKwq

It uses jQuery and debouncedresize

---

This is still a hack and I've been able to produce gaps. I'd be interested to see if this can be improved upon so rounding errors can be completely resolved.

[anthonyhastings]

Hitting some rounding errors myself so would love some recommended fix!

[mimeArtist]

Not sure my issue relates to this as it's more to do with how my ages are resized on upload... Instead I've got a feature request (I think)...

Basically let's say you have 10 images over 3 columns with all images approximately the same ratio...

... 9 images spread over 3 columns and the 3rd column is slightly shorter (possibly only by a few pixels) that the first two because the ratio of its images are slightly smaller...

...presently the 10th image would go in the 3rd column when really I'd prefer it to go in the 1st column so that the layout appears to be ranged left

Does that make sense?

[desandro]

@mimeArtist I believe you're asking for something like masonry ordered. I'd rather have Packery stick to its layout algorithm, rather that catering to this use case.

[RwwL]

Just for reference & additional test cases for any patch that gets written: this page looks like another example of rounding errors that can occur: http://kirans.spacecrafted.com/press

The main content is set up as a 3-column Packery grid; in Firefox and IE (only checked IE11 so far) it's bouncing down to 2 columns when the window gets wider than 1200px... it's probably worth nothing a parent element of this Packery layout has a max-width of 1200. I'll try to implement the recommendations above and see if that settles everything.

[mimeArtist]

Here is an example of my issue...

As you can see the 3rd image ends up in the 2nd column... so any other images are then out of order... just wondering if there is a work around where I can say there is a bias towards the previous column if the difference in column heights thus far are only a few pixels?

I tried the masonry ordered and it still did the same thing

[mimeArtist]

...PS I did say to the person uploading to make sure their images are the same height each time... but trouble is sometimes they're having to trim borders and some image are HD and others SD so they don't always factor down the same hence needing some bias to the previous column

[bobiblazeski]

Any plans for solving this issue? Here's one of the example getting messed up when bootstrap 3 css & js are added http://codepen.io/anon/pen/IkadE

[patosG]

the last comment on this page #134 resolves this issue.

[schneikai]

I just did some testing and it seems to me that two fixes are required that already exist in various other issues so I summarize them here for others:

1.) Column width must be calculated dynamically. Examples here desandro/masonry#475 (comment) or here #134 (comment).

2.) The canFit method must be patched to tolerate a 1px overlap. Example here #134 (comment)

[desandro]

v1.3.2 has been released with several improvements to resolve responsive sizing across browsers. Please try it out and let me know if you see any improvements with your implementations.

[desandro]

Closing here as fixed. Please open a new issue if you run into trouble.

[englishextra]

I try to always use msnry.layout() / pckry.layout() with setTimeout/setInterval (depending on your logic) right after the msnry/pckry have been initialized. Yes, init and then trigger .layout() some 100ms after. That way your vertical gaps will be realigned/recalculated, and blocks wont overlap vertically.

As for 1px gaps, avoid floating 0.33333 percentages. use plain 0.25 0.5 etc.