Can't use class names or percentages for gutter size about vue.isotope HOT 4 CLOSED

Please create a jsfiddle and provide detailled explanation.

from vue.isotope.

This is a pretty neat option available for (at least) the masonry layout. Instead of specify columnWidth and gutter in pixels, you can provide a class name of an element, the width of which determines those values. You can view the docs here (see columnWidth section).

Going back to the original example, the options would look like this:

options:{
    itemSelector: 'element-item',
    masonry: {
        columnWidth: 'grid-sizer',
        gutter: 'gutter-size'
    }
}

and would have the following corresponding elements in the DOM (within the isotope div, I believe)

<div class="grid-sizer" style="width: 50px;">
<div class="gutter-sizer" style="width: 10px;">

Here's a Codepen:

https://codepen.io/anon/pen/YJvvxX

As you can see, the elements collapse on one another. This can be remedied by:

1. Removing the <div class="grid-sizer"></div> and <div class="gutter-sizer"></div> from the HTML; and
2. modifying the options in the JS to use integers instead of text names (as illustrated by the commented out portion).

from vue.isotope.

I think this pull request fixes this issue:

#57

from vue.isotope.

I need this feature as well

from vue.isotope.