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 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 Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
React Grid-system
A powerful Bootstrap-like responsive grid system for React.
Autoresponsive React
Auto Responsive Layout Library For React.
React CSS Grid
React layout component based on CSS Grid Layout and built with styled-components.
React Stack-grid
Pinterest like layout components for React.js.
Reflexbox
Primitive for controlling width, margin, padding and more. Both and share the same props.
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.
React Grid-gallery
Justified image gallery component for React inspired by Google Photos and based upon React Images.
React Stonecutter
Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation.
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.
Styled Css Grid
A tiny CSS grid layout for React.
Hedron
A no-frills flexbox grid system for React, powered by styled-components.
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 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 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 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.
Mauerwerk
A react-spring driven masonry-like grid with enter/exit and shared element transitions.
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
