React Flex Grid
A simple React based grid system using flex. Uses 12 columns based on the 8px grid system. View on GitHub.
current breakpoint:
Basic grid
12
6
6
3
3
3
3
Offset columns
4, offset 8
5, offset 1
5
Column order
xs: second, md: first
xs: first, md: second
Auto-layout
The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.
auto
auto
auto
auto
6
auto
Spacing
Default spacing is 0.5rem or 8px. Enter number between 0 and 4. 8px * spacing.
auto - spacing: xs: 0, md: 4, lg: 1
auto - spacing: xs: 0, md: 4, lg: 1
auto - spacing: xs: 0, md: 4, lg: 1
Justify
6 - xs: center, md: start, lg: end
8 - xs: start, md: center
Align
6 - xs: center, md: start, lg: end
8 - xs: start, md: center
No container
auto
auto
auto
Custom container
auto
auto
auto