@sep/react-grid

A react based grid system

Usage no npm install needed!

<script type="module">
  import sepReactGrid from 'https://cdn.skypack.dev/@sep/react-grid';
</script>

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 width
  • forcedSize (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.