10 Best Javascript Grid Layout Libraries

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.

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

Magic Grid

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.

Muuri

LostGrid

It is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

LostGrid

GridList

Drag and drop library for a two-dimensional resizable and responsive list of items.

GridList

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.

Packery

Minigrid

Minimal 2kb zero dependency cascading grid layout without pain.

Minigrid

Rebass Grid

Responsive React grid system built with styled-system.

Rebass Grid

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.

Waterfall

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

egjs-infinitegrid

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.

grid-kiss

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.