@zerodp/griddie v0.1.0
Griddie
Grid component library for React.
Why?
There are already some great grid packages out there (AntD-Grid, Bootstrap, Material-D). they all have there strong points. But i usually ended up with custom components with a lot of edge cases. And i needed to install a hole framework. Sometimes i even ended up with installing 2 grid systems/frameworks to make the best of it.
Installation
yarn add @zerodp/griddie
ornpm install @zerodp/griddie
Typings and declarations included
Features
- No css files and no config needed
- 0 dependencies! other then
React
for Smaller bundle size - Responsive
Container
or only reponsive on specific breakpoints - Responsive vertical and horizontal gutters per breakpoint example
- Responsive offset, push, pull and order per breakpoint
- Configurable column layout per
Row
example useBreakpoints
hook (usingwindow.matchMedia
and notwindow.resize
! for better performance)- global configuration for cummon used settings
Examples
Basic example
Basic implementation for basic usage.
Use:gutter{[30]}
array prop for vertical and horizontal gutters or use:gutter{30}
number prop if you only want horizontal gutters.
If you want independent vertical, horizontal gutters you can use:gutter{[15, 30]}
import { Container, Row, Col } from "@zerodp/griddie";
const App = () => {
return (
<Container>
<Row gutter={[30]}>
<Col xs={12} md={6} xl={3}>
<div>Col 1</div>
</Col>
<Col xs={12} md={6} xl={3}>
<div>Col 2</div>
</Col>
<Col xs={12} md={6} xl={3}>
<div>Col 3</div>
</Col>
<Col xs={12} md={6} xl={3}>
<div>Col 4</div>
</Col>
</Row>
</Container>
);
};
Auto columns
Use the auto
prop to automatically fit columns without breakpoints.
Col 2, 3 and 4 will automatically fit the available row space
import { Container, Row, Col } from "@zerodp/griddie";
const App = () => {
return (
<Container>
<Row gutter={[30]} auto>
<Col xs={12} md={6} xl={3}>
<div>Col 1</div>
</Col>
<Col>
<div>Col 2</div>
</Col>
<Col>
<div>Col 3</div>
</Col>
<Col>
<div>Col 4</div>
</Col>
</Row>
</Container>
);
};
Responsive width
Use the fluid
prop on Container
to make the container fill the width of the screen.
You can set specific breakpoints to only use 100% width on those breakpoints.
import { Container, Row, Col } from "@zerodp/griddie";
const App = () => {
return (
<Container fluid xs sm md>
<Row gutter={[30]}>
<Col xs={12}>
<ColContent />
</Col>
</Row>
</Container>
);
};
Responsive gutters
import { Container, Row, Col } from "@zerodp/griddie";
const App = () => {
return (
<Container>
<Row gutter={[30]}>
<Col xs={12} md={6} xl={3}>
<ColContent />
</Col>
<Col xs={12} md={6} xl={3}>
<ColContent />
</Col>
<Col xs={12} md={6} xl={3}>
<ColContent />
</Col>
<Col xs={12} md={6} xl={3}>
<ColContent />
</Col>
</Row>
</Container>
);
};