react-grid

A simple grid system for React.

Installation

npm i -S @impulsiveweb/react-grid

Usage

Simple 12 columns grid

import { Grid, Row, Cell } from '@impulsiveweb/react-grid';

const Page = () => {
  return (
    <Grid>
      <Row>
        <Cell>1</Cell>
        <Cell>2</Cell>
        <Cell>3</Cell>
        <Cell>4</Cell>
        <Cell>5</Cell>
        <Cell>6</Cell>
        <Cell>7</Cell>
        <Cell>8</Cell>
        <Cell>9</Cell>
        <Cell>10</Cell>
        <Cell>11</Cell>
        <Cell>12</Cell>
      </Row>
    </Grid>
  );
};

Using breakpoints

import { Grid, Row, Cell, Breakpoints } from '@impulsiveweb/react-grid';

const breakpoints: Breakpoints = {
  small: 320,
  medium: 768,
  large: 1367,
};

const Page = () => {
  return (
    <Grid breakpoints={breakpoints}>
      <Row>
        <Cell>1</Cell>
        <Cell>2</Cell>
        <Cell>3</Cell>
        <Cell>4</Cell>
        <Cell>5</Cell>
        <Cell>6</Cell>
        <Cell>7</Cell>
        <Cell>8</Cell>
        <Cell>9</Cell>
        <Cell>10</Cell>
        <Cell>11</Cell>
        <Cell>12</Cell>
      </Row>
    </Grid>
  );
};

Properties

Grid

breakpoints

Responsive breakpoints

type: {small: number, medium: number, large: number}

default value: {small: 320, medium: 768, large: 1367}

To change the default breakpoints, you can pass an object with

const breakpoints = {
  small: 320,
  medium: 768,
  large: 1367,
};
<Grid breakpoints={breakpoints}>...</Grid>;

columns

Columns visible for each breakpoints

type: [number, number, number]

default value: [4, 6, 12]

To change the default columns, you can pass an array with

const columns = [4, 6, 12];
<Grid columns={columns}>...</Grid>;

maxWidth

Maximum width of grid container

type: number

To change the default max width, you can pass a number with

const maxWidth = 1400;
<Grid maxWidth={maxWidth}>...</Grid>;

fluid

Full width grid container

type: boolean

default value: false

Using full width (fluid) grid

<Grid fluid>...</Grid>

children

Children of grid

type: ReactNode

<Grid>
  <Row>...</Row>
</Grid>

Row

children

Children of row

type: ReactNode

<Grid>
  <Row>
    <Cell>...</Cell>
  </Row>
</Grid>

Cell

span

Spread of Cell within the Grid

type: [number, number, number] | number

default value: [4, 6, 12]

<Grid>
  <Row>
    <Cell span={[4, 6, 12]}>...</Cell>
  </Row>
</Grid>

The above Cell will take 4 columns in small, 6 in medium and 12 is large screens.

skip

Skip the cell from the grid (Add margin-left)

type: [number, number, number] | number

default value: [0, 0, 0]

<Grid>
  <Row>
    <Cell skip={[0, 0, 6]}>...</Cell>
  </Row>
</Grid>

The above Cell will skip 6 columns from the grid on large screens.

useBreakpoints hook

Used to get the current breakpoint and viewport width

import { useBreakpoints } from '@impulsiveweb/react-grid';
const breakpoints = {
  small: 320,
  medium: 768,
  large: 1367,
};
const { breakpoint, width } = useBreakpoints(breakpoints);

Nested Grid example

@impulsiveweb/react-grid supports nested grids. You can use Row and Cell components inside another Cell component.

<Grid>
  <Row>
    <Cell>
      <Row>
        <Cell>
          <p>Full width paragraph</p>
        </Cell>
      </Row>
    <Cell>
  </Row>
</Grid>

Author

Ashok Vishwakarma

LinkedIn • Twitter • Medium • Website