You are probably aware that CSS Grid Layout is finally here in the latest versions of Firefox and Chrome. Developers can now enjoy the awesomeness of grid layouts, one of the most awaited features in the history of CSS. But if you are looking for solution that will help you to manage your content without much hassle, here are 10 Best Javascript Grid Layout Libraries which makes your job a whole lot easier and faster.
Shuffle
Categorize, sort, and filter a responsive grid of items.
Magic Grid
It is a Javascript library that makes it super simple to create grid layouts With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it’s all very simple
Muuri
It is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated.
LostGrid
It is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
GridList
Drag and drop library for a two-dimensional resizable and responsive list of items.
Packery
It is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.
Minigrid
Minimal 2kb zero dependency cascading grid layout without pain.
Rebass Grid
Responsive React grid system built with styled-system.
Waterfall
Tired of using creepy hacks or heavy ways to get a grid based on Pinterest? This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn’t work well when you don’t know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn’t matter: Waterfall will work.
egjs-infinitegrid
A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance
grid-kiss
This is a PostCSS plugin aiming to replace the 24 new properties brought by CSS Grids with a single one that you immediately understand when you see it.
A plugin worth trying:
https://bossanova.uk/jspreadsheet