README
react-grid
This is a 12 column grid similar to Bootstrap. The API is compatible to react-flexbox-grid.
Requirements
- react
- CSSModules
Installation
yarn add @sep/react-grid
Add node_modules/@sep/react-grid
to your webpack-config's Babel and SCSS loaders.
Add styles:
// overwrite SASS-variables first, (see -> Configuration section)
// then import the SCSS-file
@import "@sep/react-grid/index.scss";
Configuration
You can configure these SCSS variables, by defining them in your SCSS before importing the grid's SCSS-file;
$grid-columns
Number of columns for the grid (default:12
)$grid-gutter-width-base
Gutter for all breakpoints (default:1em
);$grid-breakpoints
SASS-map of breakpoints (default:(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
)$container-fluid-margin
SASS-map of horizontal margins for the fluid container (default:(xs: 10px, sm: 20px, md: 40px, lg: 60px, xl: auto)
)$container-fluid-max-width
: Max width for fluid-grid (default:1320px
)$grid-gutter-widths
SASS-map with breakpoint-specific gutters (default:$grid-gutter-width-base
for all breakpoints)$container-max-widths
SASS-map of container's max width per breakpoint (default:(xs: calc(100% - #{2*map-get($grid-gutter-widths, "xs")}), sm: 544px, md: 720px, lg: 940px, xl: 1140px)
)
Usage
import { Grid, Row, Col } from '@sep/react-grid';
<Grid>
<Row>
<Col md={6}>column 1</Col>
<Col md={5} mdOffset={1}>column 2</Col>
</Row>
</Grid>
All three components support the prop tagName
(string) to render it with a certain tag. The <Grid />
defaults to <main>
, <Row />
defaults to <section>
and <Col />
defaults to <div>
.
All other properties like className
, style
, etc. are passed to the rendered elements.
Grid
The <Grid />
-component is the root container of your grid and is responsible for defining the max width of your grid. It supports these props:
fluid
(boolean) The container should be a fluid container and not jump between different sizes (margins defined in$container-fluid-margin
apply).fullWidth
(boolean) The container should take the full widthforcedSize
(string, one of:xs
,sm
,md
,lg
,xl
) Forces the grid layout to show at a specific size even if the screen-size is smaller. This can be used to preview mobile layouts in a desktop browser.
Col
xs
,sm
,md
,lg
,xl
(number): Number of columns the component should take on the corresponding screen-size.xsOffset
,smOffset
,mdOffset
,lgOffset
,xlOffset
(number): Number of columns the component should be offset.