12 React UI Layout Grid Components and Libraries for 2019

December 20, 2018 0 Comments

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.

Any component from any UI library can be individually consumed with Bit (open source). You can also use Bit to easily share, organize and sync components between your own projects to build faster. Give it a try.

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.

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.

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.

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.

Looks familiar, right?

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.

Most of them are awesome, some are a bit old and unmaintained…

Tag cloud