The grid redraw elements based on windows width

[scosmaa]

It's only a suggestion. Is it possible to adapt the elements breakpoints to the container div despite the window width?

Thank you!

[sheriffderek]

I find this suggest hard to understand. Could you reword it?

[mateuswetah]

Just passing by here to discuss the issue, because I think it is really useful: What @scosmaa seems to be asking is a container-based responsiveness instead of window-based. So for example, if the masonry is inside a DIV that has a left and right margins of 64px, then the rules passed for calculating columns would obey the container of 100vh - (64px + 64px) for example. It would be a really great feature, but I'm afraid it might not be easy to do if this part of the code is made using only media queries...

[designcouch]

It's been a while since this was commented on, but this is the exact situation I'm trying to code for (it's for a chrome extension, so the window width is meaningless to me as my extension is inserted over the existing page, and the user is able to resize it). Any movement on something like this?

[mateuswetah]

@designcouch this repo seems to be pretty stale for now. I've migrated to Desandro's Masonry since it offers more options even though it is heavier and JS based.

[koas]

I also faced the same problem as OP, I managed to solve it using a mutation observer on the container element to detect a width change and then triggering a key update on the masonry element.

This is the mutation observer part for those that are not familiar with this JS feature:

const moTarget = document.getElementById("#theContainerElement");
const moConfig = { attributes: true };

const moCallback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.attributeName == "style") {
      const newWidth = moTarget.getBoundingClientRect().width;
      // We now have the new parent width so we can detect any changes
    }
  }
}

const mo = new MutationObserver(moCallback);
mo.observe(moTarget, moConfig);