After recently reviewing some useful CSS and JS grid systems, many people asked for a React-specific review of useful Grid libraries and components. So, here it is. I’ve researched and reviewed 12 (unranked) React libraries and components, standalone or part of larger libraries, to get the job done fast.

Note that this review isn’t about data grids (Griddle etc), but rather UI grid layouts. Please feel free to comment, add your own insights on these libraries and add more. Finding the right grid the implement in your app will let you start building the app features faster, and save precious development time.

Tip: Reuse components to save time and built a better UI across apps! Use tools like Bit (GitHub) to easily share components across projects, reduce overhead and build faster as a team. It’s free, give it a try in minutes.

Easily reuse components across apps, build faster

It even plays with Git and NPM to fit into your workflow, so you can easily share, use and sync components across your projects. Save time, build faster and keep your UI/UX consistent for users across apps. Take a look.

1. React grid layout

At 8K stars, react-grid-layout provides a draggable and resizable grid layout with responsive breakpoints, for React. It’s responsive and supports (responsive) breakpoints which can be provided by the user or autogenerated. It’s compatible with server-rendered apps, comes with draggable and resizable widgets, configurable packing (horizontal, vertical, off) and you can add and remove widgets without rebuilding the grid. Here’s a live demo.

2. React Flexbox grid