Responsive grid system for React
Flexible 12 column grid system for building responsive layouts with flexbox
Mobile first responsive layout built with flexbox. Working with 12 columns across five breakpoints to cover a great variety of screen sizes.
Sizes cover extra small - up to 576 px, small, medium, large and extra large screens - above 1200 px.
Use it to create flexible layouts with the following features:
- Five built-in breakpoints
- Optional fixed width grids
- 12 column grid across all screen sizes for fine grain control
- Vertical and horizontal alignment of columns inside the grid
- Column offsets for precise positioning
- Push and pull for reordering content responsively
- Equal width columns and dynamic width columns
- Future proof built with flexbox
Grid layout demos available for other frameworks.
Viewing demos & code for
React Grid layout
Grid layout for React
Change the theme setting here
Change the language and localization settings here
Grid layout - Column sizing
Grid layout - Vertical alignment
Grid layout - Horizontal alignment
Grid layout - Offsetting columns
Grid layout - Push and pull
Grid layout - Responsive
Grid layout - Fixed width
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.