Layout system made easy!
This is a hand-picked collection of the 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 12 2023
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.
Auto Responsive Layout Library For React.
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. Atomic Layout
Build declarative, responsive layouts in React using CSS Grid.
A Masonry component leveraging CSS and native React rendering, for fast, responsive masonry layouts.
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.
Bringing the Web’s Responsive Design to React Native
An easy and simple to use React Native component to render a custom high performant masonry layout for images. It uses a smart algorithm to sort the images evenly as possible according to the index position or fill in as soon as the image is fetched. Includes support for both iOS and Android.
Easy way to implement responsive layouts and grids.
5. Three Column Layout For React Native
An animated tree-column layout component designed for tablets.
To learn more about layout on modern web & mobile development, here are a few resources available online: