Layout system made easy!
This is a hand-picked collection of 10 best free layout components for React & React Native to create responsive, mobile-friendly grid, list, and card views on modern applications. Have fun!
Originally Published Nov 30 2017, updated Jan 06 2021
Table Of Contents:
Best Layout Components For React:
1. Draggable and Resizable Grid Layout For React
React-Grid-Layout is a draggable and resizable grid layout system with responsive breakpoints.
2. Auto Responsive Layout Libary For React
A magic, animated, responsive grid layout library for React and React Native.
3. Animated Grid Layout Component For React – react-stonecutter
react-stonecutter is a Masonry-style animated grid layout component for React. Choose between CSS Transitions or React-Motion for animation.
4. Tiny CSS Grid Layout For React
A tiny (~2kb) CSS grid layout for React, built with styled-components.
5. Re-Flex
Resizable Flex layout container components for advanced React web applications
Best Layout Components For React Native:
1. Masonry Style Image Layout For React Native
An easy to use React Native component to render a Masonry-like layout for remote images.
2. Responsive Grid For React Native With RTL Layout Support
This Responsive Grid (for React Native) corrects the mental model for Grid based layout in that it eliminates the decoherence that results from using both an absolute column count together with relative sizing (!) by letting the developer specify the width of each grid column as a percentage of screen size and then specify the width of a given column in their layout as a multiple of that percentage.
3. Responsive Layouts And Grids For React
A set of components and utilities that make building responsive RN user interfaces easy by bringing concepts used on the web.
4. Auto Responsive Layout Libary For React Native
A magic, animated, responsive grid layout library for React and React Native.
5. react-native-masonry-list
An easy and simple to use React Native component to render a custom high performant masonry layout for images.
More Resources:
There’re lots of layout JavaScript libraries out there and you can find more React & React Native resources about layout system on our Layout category.
To learn more about layout on modern web & mobile development, here are a few resources available online:
- 10 Best jQuery/JavaScript Masonry Layout Plugins
- 10 Best Grid Layout Systems In JavaScript And CSS
- 10 Best JavaScript & CSS Responsive Grid Layouts