react-grid


React grid component

$3

``sh
npm install react-grid --save
yarn add react-grid
`

$3

https://swiftcarrot.dev/react-grid

$3

`javascript
import React from 'react';
import { Container, Row, Col } from 'react-grid';

function App() {
return (






);
}
`

$3

| bootstrap css class | component |
| --------------------- | ------------------------------- |
| .container | |
| .container-fluid | |
| .row | |
| .row.no-gutters | |
| .col | () |
| .col-sm | |
| .col-md-auto | |
| .col-6 | |
| .col-md-6 | |
| .col.order-12 | |
| .col-md-4.offset-md-4 | |

#### Container

`javascript


`

#### Row

`javascript

`

#### Col

`javascript





`

$3

#### with props

`javascript
// grid.js
import {
Container as ReactContainer,
Row as ReactRow,
Col as ReactCol
} from 'react-grid';

const styles = {
breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
containerMaxWidths: { sm: 540, md: 720, lg: 960, xl: 1140 },
columns: 12,
gutterWidth: 30
};

export const Container = props => ;
export const Row = props => ;
export const Col = props => ;

// app.js
import { Container, Row, Col } from './grid';

const App = () => (






);
`

$3

react-grid implments breakpoint functions similar to bootstrap grid:

- mediaBreakpointUp
- mediaBreakpointDown
- mediaBreakpointBetween
- mediaBreakpointOnly

`javascript
/* @jsx jsx /
import { jsx, css } from '@emotion/core';
import { mediaBreakpointUp } from 'react-grid';

const App = () => (
css={css
${mediaBreakpointUp('sm')} {
font-size: 12px;
}
}
/>
);

// or

const App = () => (
css={{
[mediaBreakpointUp('sm')]: {
fontSize: 12
}
}}
/>
);
``

$3

MIT