packery | : bento : Gapless , draggable grid layouts | Grid library

 by   metafizzy JavaScript Version: 2.1.2 License: No License

kandi X-RAY | packery Summary

kandi X-RAY | packery Summary

packery is a JavaScript library typically used in User Interface, Grid, React applications. packery has no bugs, it has no vulnerabilities and it has medium support. You can install using 'npm i packery-webpack' or download it from GitHub, npm.

See for complete docs and demos.

            kandi-support Support

              packery has a medium active ecosystem.
              It has 3999 star(s) with 329 fork(s). There are 96 watchers for this library.
              It had no major release in the last 12 months.
              There are 48 open issues and 492 have been closed. On average issues are closed in 97 days. There are 4 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of packery is 2.1.2

            kandi-Quality Quality

              packery has 0 bugs and 0 code smells.

            kandi-Security Security

              packery has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              packery code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              packery does not have a standard license declared.
              Check the repository for any license declaration and review the terms closely.
              Without a license, all rights are reserved, and you cannot use the library in your applications.

            kandi-Reuse Reuse

              packery releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              packery saves you 909 person hours of effort in developing the same functionality from scratch.
              It has 2075 lines of code, 0 functions and 51 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed packery and discovered the below as its top functions. This is intended to give you an instant insight into packery implemented functionality, and help decide if they suit your requirements.
            • Bundle plugin methods
            • Get object size
            • Creates a new Elasticlayer .
            • Sets up the box size
            • call method on plugin methods
            • Get the size of all measurements
            • Construct a new Item object .
            • creates the random item and adds it to the DOM
            • get milliseconds in ms
            • call plugin method
            Get all kandi verified functions for this library.

            packery Key Features

            No Key Features are available at this moment for packery.

            packery Examples and Code Snippets

            Using Packery with Angular 2
            Lines of Code : 38dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            var packery = new Packery(this.grid.nativeElement, {
            itemSelector: '.grid-item', columnWidth: 100 });
            "scripts": [

            Community Discussions


            jQuery Isotope and Packery: grid items vertically overlap each other
            Asked 2021-Dec-27 at 15:26

            Why do the grid items in Isotope when using Packery vertically overlap each other?

            Is it because they are dynamic in size? I.e., each Twitter feed item can be a different size after loading?

            Or is there something wrong with the way I call imagesLoaded or Packery?

            I can't get a code snippet to work here on SO, so here is a fiddle




            Answered 2021-Dec-27 at 15:26

            Well, imagesLoaded works with images, while your code loads twitter cards.

            A workaround for this would be to use the twitter API



            responsive Masonry/Packary overlaps over other images and DOM elements
            Asked 2021-Feb-01 at 07:25

            I have been working on several things related to this for hours now. I finally got it to work, but somehow it broke again. So here I am.

            For my use-case I want to display images with Packery. The images have to sort themselves so that the grid has no gaps. The user will be able to choose the sizing of the images inside the grid, and the grid should sort accordingly.

            With every method that I've tried, they display over the rest of the page, or stack on top of each other.

            I tested this with Masonry, Packery and Isotope. All give the same results. My code sample below is of the Packery attempt.

            Edit: After more testing, I figured out that this issue only occurs when combining height and width classes. When only one of those is present, no overlapping occurs. I do need this functionality though.

            The blue line shows where the images should end.



            Answered 2021-Feb-01 at 07:25

            After experimenting for a few more hours, I figured out that it is not possible to combine width and height classes that both use percentages. I now use percentages for width only. Height now uses fixed px values.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install packery

            packery.pkgd.js un-minified, or
            packery.pkgd.min.js minified


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone metafizzy/packery

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link