A simple grid system for React.
npm i -S @impulsiveweb/react-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>
);
};
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>
);
};
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 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>;
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>;
Full width grid container
type: boolean
default value: false
Using full width (fluid) grid
<Grid fluid>...</Grid>
Children of grid
type: ReactNode
<Grid>
<Row>...</Row>
</Grid>
Children of row
type: ReactNode
<Grid>
<Row>
<Cell>...</Cell>
</Row>
</Grid>
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 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.
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);
@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>