# @zerodp/griddie

> > Grid component library for [React][react].

Latest version **0.1.0** (published 2021-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zerodp/griddie
pnpm add @zerodp/griddie
yarn add @zerodp/griddie
bun add @zerodp/griddie
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-06-14 |
| First published | 2021-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Julian Klumpers |
| Maintainers | julianklumpers |

## Links

- npm: https://www.npmjs.com/package/@zerodp/griddie
- Homepage: https://github.com/julianklumpers/griddie
- Issues: https://github.com/julianklumpers/griddie/issues
- npm.io page: https://npm.io/package/@zerodp/griddie

## Recent versions

- 0.1.0 (latest) — 2021-06-14
- 0.0.9 — 2021-03-11
- 0.0.8 — 2021-03-11
- 0.0.7 — 2021-03-11
- 0.0.6 — 2021-03-11
- 0.0.5 — 2021-03-11
- 0.0.4 — 2021-02-23
- 0.0.3 — 2021-02-23
- 0.0.2 — 2021-02-22
- 0.0.1 — 2021-02-22

## README

# Griddie

> Grid component library for [React][react].

<!-- ## Documentation
See the [documentation][documentation] with examples and API documentation. -->

### 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` or `npm 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][example]
- Responsive offset, push, pull and order per breakpoint
- Configurable column layout per `Row` [example][example]
- `useBreakpoints` hook (using `window.matchMedia` and not `window.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]}`

```js
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

```js
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.

```js
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

```js
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>
  );
};
```

[react]: https://reactjs.org/
[documentation]: https://google.com/
[example]: https://google.com/

---
_Source: https://npm.io/package/@zerodp/griddie · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._