metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.13k stars 315 forks source link

What is the difference between the 'masonry' and 'draggable dashboard' options on the draggable page? I'd recommend adding demos for those too. #423

Closed kdamken closed 7 years ago

kdamken commented 7 years ago

Test case: http://packery.metafizzy.co/draggable.html

None of the examples with code on this page seem to include how to add a gutter and get that working with Draggabilly. The only way I was able to get it working was to look at the source code for the examples at the top of the page and find the css (with it's complicated calc values for the widths) and js for the draggable dashboard one.

My first suggestion would be to add documentation for these two examples as well, so as to help people understand how to incorporate the gutters into these kinds of layouts.

Second part - what is the difference between the 'masonry' and 'draggable dashboard' options? After reviewing the code, the only difference seems to be that the 'draggable' one uses those css calc values for the width and the 'masonry' one has grid items with all the same width.

Lastly, why is that first example called the 'masonry' one? I checked and it doesn't seem to use the masonry library, which was a bit confusing to try and figure it out.

Thanks for any info you can provide!

desandro commented 7 years ago

None of the examples with code on this page seem to include how to add a gutter and get that working with Draggabilly.

See Packery gutter examples. Then add in Draggabilly.

After reviewing the code, the only difference seems to be that the 'draggable' one uses those css calc values for the width and the 'masonry' one has grid items with all the same width.

Yes, that's it. The difference is the size of the items. It's to show how draggable UI can be used for two different kinds of layouts.

Lastly, why is that first example called the 'masonry' one?

That's a name of that kind of layout.