Nelson Michael Nelson Michael is a frontend developer from Nigeria. When he's not meddling with CSS, he spends his time writing, sharing what he knows, and playing games.

Top 10 React Grid components and libraries for 2021

4 min read 1159

React Logo Over a Grid

When building websites, there are many things to consider to ensure that your website looks great and performs well.

In this post, we’ll look at the top ten unranked React Grid component libraries that help you build great-looking and performant grid layouts.

What is React-grid-layout?

React-grid-layout (RGL) is a draggable and resizable grid layout with customizable responsive breakpoints for React applications. The breakpoint layout can be auto-generated or created by the user. RGL is React-only and does not require jQuery.

A great feature of RGL is that you have the ability to add or remove widgets from your layout without rebuilding the entire grid.

Some of its top features include:

  • Responsive breakpoints
  • Draggable widgets
  • Resizable widgets
  • Compatible with server-rendered apps

React-grid-layout shines when you want to build something like a metrics dashboard with draggable widgets, like so:

With over 12.7k stars, 6.5k users, and 7.9m downloads on GitHub, this grid layout is used and loved by many developers.

Rebass

Rebass is a React UI component library that comes with Reflexbox, a responsive grid layout system for React.

Reflexbox provides two components to layout your react application: flex and box. The flex component sets the layout container, while the box component specifies the items in the container.

It also has something called variants, which lets you set different variations in your theme and apply them on a per-element basis. Variants are great on the box component when you want the items in the layout container (flex) to have distinct variations.

We made a custom demo for .
No really. Click here to check it out.

Additionally, Reflexbox follows the theming specification, making it easy to set up the layout grid with any theme provider of your choice and have the same design specifications such as colors, spacing, and typography across your application.

Here are some top Reflexbox features:

  • Ergonomic responsive array-based values
  • Primitive-styled components for all your layout needs
  • Themeable and compatible with the theme specification
  • Built with Emotion, with support for styled components

Rebass itself is fast-growing, has 7.1k stars, 7.1k users, and 73.99k downloads per week on GitHub.

Rebass

React-flexbox-grid

React-flexbox-grid is a set of React components that implement flexboxgrid.css with the power of CSS modules. Flexbox Grid is a grid system based on the flex display property.

With responsive modifiers, you can specify different offsets, alignments, and column sizes at small, medium, and large viewport width. Resizing rows and columns is fluid because React-flexbox-grid uses percentage-based width.

Auto width lets you add unlimited number of auto sizing columns to a row, and the grid figures out the proper sizing for each column.

Currently, it has 2.8k stars, 7.3k users, and 132k downloads per month on GitHub.

React-Flexbox-Grid

Auto-responsive-react

Auto-responsive-react is a responsive layout library for building responsive React applications.

If you are looking for an easy way to perform simple and subtle animations on page resize, then this library gets the job done for you. You can control the transition-timing-function by passing regular CSS transition-timing-function values (i.e., linear, ease-in, etc.).

A good use case for this library is when you’re building something like an image gallery. Here’s an example.

Currently at 1.4k stars, 240 users, and 2k downloads per month on GitHub, Auto-responsive-react is simple but powerful.

Auto-Responsive-React

Grommet

Currently at version 2, Grommet is a React-based framework that “provides accessibility, modularity, responsiveness, and theming in a tidy package,” according to its website. It offers a neat grid component for laying out content.

With just a boolean value, you can set whether or not you want margin and pad sizes to be scaled for mobile environment.

It is easy to build your apps for different screen sizes using responsive breakpoints, which makes it easy to set layout changes using those breakpoints.

This amazing library provides a great experience for your app layout. It currently has 7k stars, 5.8k users, and 79k downloads per month on GitHub.

Grommet

React-grid-system

At 587 stars, 3.7k users, and 71k downloads per month on GitHub, React-grid-system is a responsive grid system built for react applications and heavily inspired by Bootstrap.

It offers features such as setting breakpoints and gutter widths through Reacts context.

It provides three components for creating responsive grids: container, row, and col. This is similar to what Rebass does with Reflexbox, but the difference is Reflexbox uses flexbox properties while react-grid-system creates layout by setting the rows and columns for the grid items.

React-Grid-System

React-stonecutter

React-stonecutter is an animated grid layout component for React. For animation, you can choose between CSS Transitions or React-Motion.

React-stonecutter offers a Pinterest-like layout with varying heights, and it handles animations sleekly using either CSS transitions with regular transform property values or with React-motion.

Furthermore, it offers measureItems, a higher-order function for when you don’t know the heights of your items ahead of time. You can use this function to measure the items in the browser before layout.

Currently, react-stonecutter has 1.1k stars and 343 users on GitHub, it’s a fun library to play with, and gets the job done.

React-Stonecutter

React-Bootstrap

React-Bootstrap is a React component library that adopts the core of Bootstrap 4, so it relies on bootstraps themes, stylesheets, and the like.

Similar to how react-grid-system works, React-Bootstrap offers a layout component that works with a series of containers, rows, and columns to layout content. It’s built with flexbox and is fully responsive.

It also offers auto-layout for flexbox grid columns, so when you set or change the width of a column, sibling columns will automatically resize around it.

With 18.9k stars and 373k users on GitHub, React-Bootstrap is definitely worth checking out.

React-Bootstrap

react-stack-grid

react-stack-grid is another grid component library that provides a Pinterest-like layout for building react applications.

react-stack-grid has a feature called updateLayout() method that comes in handy when you want to manually update the layout if the size of an item changes after an action — such as a click event — occurs.

Another top feature is how it handles animations of page resize. You can pick from a variety of easings and transition values.

You should consider using this library when you want to build image galleries. It has 796 stars and over 1k users on GitHub. I love how customizable it is. Check out this demo to get a good feel for how it works.

React-Stack-Grid

Hedron

According to its official website, “Hedron is a no-frills flexbox grid system for React, powered by styled-components.”

It offers three distinct features:

  • Add unlimited breakpoints to your layout to easily control how your grid columns and rows look on different viewports
  • Any property can be altered by any breakpoint, allowing you to customize your layout on different screen sizes
  • Debug mode, which allows you to easily visualize your layout

Currently, Hedron has 846 stars, 179 users, and 28k downloads on GitHub. Looking to build dashboards? Check out Hedron.

Hedron

Conclusion

In this article, we covered 10 React grid components and libraries for 2021. They are all terrific tools to use, so it all comes down to project goals and personal preference when choosing one.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Nelson Michael Nelson Michael is a frontend developer from Nigeria. When he's not meddling with CSS, he spends his time writing, sharing what he knows, and playing games.

Leave a Reply