12 React UI Layout Grid Components and Libraries for 2019
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.
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
This 2.5K stars library provides a set of React components that implement flexboxgrid.css. It even has an optional support for power of CSS Modules with some extra configuration. Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Percent based width allow fluid resizing of columns and rows. Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column. Feel like flexbox, but in React. Nice.
3. React Material-UI grid
The extremely popular React Material-UI library (43K stars) features many great components, including a Grid. The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. It uses CSS’s Flexible Box module for high flexibility and comes with two types of layout: containers and items.
Item widths are fluid (relative percentages,) so they’re sized relative to their parent element. Items have padding to create the spacing between items and there are five grid breakpoints: xs, sm, md, lg, and xl. If you’re already using this library, it’s the obvious choice. If not, still worth checking out (you can use Bit to choose & use the component you need). Take a look.
4. Grommet grid layout
I really like Grommet and really looking forward to using v2. I think it’s a great library with a beautiful design. If you’re using the library, you’re very likely to enjoy its Grid, which provides an elegant, straightforward experience for your app layout. Feel free to take a look and try it out in StoryBook.
5. React Bootstrap / Reactstrap grid layout
React Bootstrap is a 14K React UI component library which embraces the core of Bootstrap 4 and relying on BS stylesheets, themes etc. Basically, build Bootstrap with React. The Grid layout component provides a semi-automated, responsive grid layout which is both easy to learn and easy to use. Try it (consuming the specific component with Bit or the whole library from NPM).
Reactstrap is a 7k stars React UI library with simple Bootstrap 4 components, including a Bootstrap-like grid layout. Note that apart from the library isteld, dependencies include Bootstrap and Bootstrap CSS (or, consume only the component with Bit). For those who don’t mind too much, a useful option.
6. Autoresponsive React
A 1K stars Auto Responsive Layout Library For React (there are also a react-native and vue editions). Although it doesn’t have too many contributors or NPM downloads (~350 a week), it’s simple, elegant and gets the job done. Instead of talking too much, take a look at the code example below and here’s a live demo example. Feel free to take a look.
A “Pinterest like” layout components for React.js with an API inspired by react-stonecutter. Although “only” at 450 GitHub stars, this library has 3.5K weekly downloads in NPM and provides a neat verity of features, animations and conditions. Play with the Grid online in this demo app to get the feeling.
8. Hedron
With 750 stars Hedron is a no-frills responsive flexbox grid system for React, powered by styled-components. You can add as many breakpoints as you like, which can alter any property. There’s also a neat debug mode to allow fast visual work. And, it works with styled-components for those who favor it.
9. React grid system
A somewhat less familiar Bootstrap-like responsive grid system for React. Three components are provided for creating responsive grids: Container, Row,Col. However, react-grid-system is purely React, and no CSS (!) or class names are used. Moreover, it adds various powerful features, such as setting breakpoints and gutter widths through React's context. Take a look.
10. Rebass React grid
From the Rebass team comes this 1.8K stars React Grid system built with styled-system, with support for styled-components and emotion (previously called grid-styled). All @rebass/grid components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values. If you like CSS-in-JS, this is a neat option.
11. Semantic-UI React grid
Semantic-UI with React is a popular (8.5K stars) UI library featuring many useful components based around useful principles from natural language. It features a React Grid layout which lets you divide your UI into columns rows and cells, which can get semantic names. The layout is very coonfigurable, and you can change the appearance of certain elemnts for specisif devices.
12. Reflexbox
Though this 1.2K stars library (2.5K NPM downloads/week) wasn’t really developed in the past two years, it’s still an interesting item to review. It’s a React flexbox layout and grid system with a rather simple API, an approach which separates concerns and composability, and built-in CSS-in-JS for those who favor it. It’s risky to use an undeveloped library, but still worth a look.
Honorable mentions
Most of them are awesome, some are a bit old and unmaintained…
