@nathansearles/react-flex-grid

React Flex Grid

🔥 In active development 🔥

A simple React based grid system using flex. Uses 12 columns based on the 8px grid system.

To do

• [x] Examples website
• [ ] Project level config
• [x] Testing
• [x] Refine docs

Examples

React Flex Grid Examples

Installation

@nathansearles/react-flex-grid

#Yarn
yarn add @nathansearles/react-flex-grid

#NPM
npm install @nathansearles/react-flex-grid

Column

Prop	Description	Keys	Values	Types
columns	Define columns by breakpoint	xs, sm, md, lg, xl, xxl	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'	string:string|number
offsets	Define offsets by breakpoint	xs, sm, md, lg, xl, xxl	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	string:number
ordering	Define ordering by breakpoint	xs, sm, md, lg, xl, xxl	any number	string:number

Examples

Columns

<Column columns={{ xs: 12, md: 10, xl: 8 }}>Lorem ipsum...</Column>

Offsets

<Column offsets={{ xs: 1, md: 2, xl: 4 }}>Lorem ipsum...</Column>

Ordering

<Column ordering={{ xs: 1, md: 2, xl: 1 }}>Lorem ipsum...</Column>

Row

Prop	Description	Keys	Values	Types
justify	Define justification by breakpoint	xs, sm, md, lg, xl, xxl	"normal", "start", "center", "end"	string:string
align	Define alignment by breakpoint	xs, sm, md, lg, xl, xxl	"normal", "start", "center", "end"	string:string
spacing	Define gutter spacing * 8px by breakpoint	xs, sm, md, lg, xl, xxl	0 , 1 , 2 , 3 , 4	string:number

Examples

Justify

<Row justify={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Align

<Row align={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Spacing

<Row align={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Simple example

import { Container, Row, Column } from '@nathansearles/react-flex-grid';

function App() {
  return (
    <Container>
      <Row>
        <Column columns={{ xs: 12, md: 6, lg: 4 }}>
          <h2>Lorem ipsum dolor sit amet...</h2>
        </Column>
        <Column columns={{ xs: 12, md: 6, lg: 4 }}>
          <h2>Lorem ipsum dolor sit amet...</h2>
        </Column>
      </Row>
    </Container>
  );
}