20 Helpful React Grid Layout Component Libraries

Most modern websites are built using a grid system. Grids are necessary to build cost-effective websites that render effectively in all browsers and any number of known and unknown resolutions. They allow for scalable and consistent layout on every device and, since responsiveness became a web standard, they have become more important than ever. So here are 20 React Grid Layout Component Libraries that will help you create better, more usable websites.

React Grid-layout

A draggable and resizable grid layout with responsive breakpoints, for React.

React Grid-layout


React Flexbox-grid

This is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.

React Flexbox-grid


React Absolute Grid

An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.

React Absolute-grid


React Grid-system

A powerful Bootstrap-like responsive grid system for React.

React Grid-system


Autoresponsive React

Auto Responsive Layout Library For React.

Autoresponsive React


React CSS Grid

React layout component based on CSS Grid Layout and built with styled-components.

React Css-grid


React Stack-grid

Pinterest like layout components for React.js.

React Stack-grid


Reflexbox

Primitive for controlling width, margin, padding and more. Both and share the same props.

Reflexbox


Rgx

Rgx is an experimental, responsive grid system based on minimum and maximum widths and designed for content-out layout. Rgx is built purely in React and uses inline styles, with no CSS and no media queries.

Rgx


React Grid-gallery

Justified image gallery component for React inspired by Google Photos and based upon React Images.

React Grid-gallery


React Stonecutter

Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation.

React Stonecutter


React Infinite Grid

This is a React component which renders a grid of React elements. It’s different because it only renders the elements that the user can see (and a small buffer) meaning that it is well suited for displaying a large number of elements.

React Infinite-grid


Styled Css Grid

A tiny CSS grid layout for React.

Styled Css-grid


Hedron

A no-frills flexbox grid system for React, powered by styled-components.

Hedron


React Splitters

There are two options how the splitter can work. You can either select to resize splitters as you are holding and dragging the handlebar, or you can postponed the resize. Splitters can be nested, but you have to specify what positions (vertical / horizontal) are they going to be and their sizes.

React Splitters


React Hexgrid

React components to build interactive hexagons grids. It uses SVG which makes it fast, scalable and easy to apply custom styles. You can easily customize the layout of the grid just by configuration. Component-based approach allows you to customize the grid shape to suit your needs or even apply your own components / SVG elements to it. You can use pre-defined generator to create certain shape grid or you may build totally your own grid to the shape you wish, while still keeping it under control and interactive.

You could easily use this library to build (just to name a few) a nice portfolio, image library or even a game!

React Hexgrid


React Masonry-infinite

Very simple React.js component for masonry grid. Based on Bricks.js, React Infinite Scroller and React Masonry Layout. Component is mostly suitable for static data, but can be used with dynamic with instance methods.

React Masonry-infinite


React Cellblock

React Cellblock makes it easy to build components that respond not only to a grid’s break point, but also to the size of their containing column. Cellblock shares some conventions with popular grids, such as Bootstrap and Foundation, but it combines the benefits of fractional grids with the benefits of grids that use fixed units.

React Cellblock


Mauerwerk

A react-spring driven masonry-like grid with enter/exit and shared element transitions.

Mauerwerk


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


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.