react-flexbox-slim
Customizable flexbox grid system for React
Installation
npm install --save react-flexbox-slim
Important Information
- 12 column grid system by default
- Utilizing the
<Grid>
component/wrapper, you can fully customize the grid system (number of columns and breakpoints) - The
<Grid>
component uses the Context API to pass down any customization - See the examples for more information
- We provide
esm
andumd
modules- By default,
esm
is imported - To import
umd
use:
const Row Column = - By default,
Defaults
// breakpoints xs: '0px' sm: '540px' md: '768px' lg: '992px' xl: '1200px'
// maxColumns12
Examples
// Basic 12 column grid system, using defaults<Row justifyContent='center'> <Column xs=12 sm=4 md=6 lg=6 xl=3> <p>Hello</p> </Column> <Column xs=12 sm=4 md=6 lg=6 xl=3> <p>World!</p> </Column></Row>
// Customized grid systemconst customBreakpoints = xs: '0px' sm: '500px' md: '800px' lg: '1000px' xl: '1600px'; const customMaxColumns = 16; <Grid breakpoints=customBreakpoints maxColumns=customMaxColumns> <Row justifyContent='center'> /* Now you can use 16 column grid system */ <Column xs=16 sm=4 md=6 lg=6 xl=3> <p>Hello</p> </Column> <Column xs=16 sm=4 md=6 lg=6 xl=3> <p>World!</p> </Column> </Row></Grid>
Components and Properties
Component | Props | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<Grid> |
See here for Grid props | ||||||||||||||||||||||||
<Row> |
|
||||||||||||||||||||||||
<Column> |
|
Grid Props
Name | Type |
---|---|
breakpoints |
Object (see below for shape) |
maxColumns |
Number |
breakpoints
If you wish to only change a single breakpoint value, you may do so. We will combine the default breakpoint values with the object you supplied
Note: this may cause issues with media queries
// breakpoints prop must be of the following shape:<Grid breakpoints= xs: String sm: String md: String lg: String xl: String >
maxColumns
Allows you to specify the number of columns for the entire grid system
<Grid maxColumns=16>