# @happyfresh/grid

> HappyFresh UI components that is a grid

Latest version **1.6.0** (published 2021-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @happyfresh/grid
pnpm add @happyfresh/grid
yarn add @happyfresh/grid
bun add @happyfresh/grid
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2021-11-02 |
| First published | 2020-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 91.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | HappyFresh |
| Maintainers | miftahfaris, rozakbuhari, fathurozak.buhari, numan.naufal.hf, dimassaputrak, viltohmyst, rakaaditya |

## Links

- npm: https://www.npmjs.com/package/@happyfresh/grid
- npm.io page: https://npm.io/package/@happyfresh/grid

## Dependencies (3)

- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.0.0-next.13
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [@happyfresh/theming](https://npm.io/package/@happyfresh/theming.md) ^1.11.0

## Recent versions

- 1.6.0 (latest) — 2021-11-02
- 1.4.1 — 2021-11-02
- 1.5.0 — 2020-10-19
- 1.3.1 — 2020-10-13
- 1.4.0 — 2020-10-13
- 1.3.0 — 2020-09-11
- 1.1.4 — 2020-07-28
- 1.1.3 — 2020-07-28
- 1.2.0 — 2020-07-28
- 1.1.1 — 2020-07-28
- 1.0.14 — 2020-07-28
- 1.1.0 — 2020-07-27
- 1.0.13 — 2020-07-24
- 1.0.12 — 2020-07-21
- 1.0.11 — 2020-07-20
- … 8 more at https://npm.io/package/@happyfresh/grid/versions

## README

# Grid

Grid based on the flex display property. Grid packages consists of Container, Row, and Column. This grid system support responsive divs based on 3 breakpoints: mobile (width < 768px), tablet (768 > width < 992), and desktop (width > 992). You can also insert styles props if you want to override current css.

source: http://flexboxgrid.com/ with a few modification.

## Installation

```sh
yarn add @happyfresh/grid
```

## Usage

```javascript
import { Container, Column, Row } from '@happyfresh/grid';

export const Example = () => (
  <React.Fragment>
    <Container fluid styles={{backgroundColor: 'black'}}>
      <Row styles={{backgroundColor: 'white'}}>
        <Column sm={12} md={6} lg={3}>
          <Row>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
          </Row>
        </Column>
        <Column reverse sm={12} md={6} lg={3}>
          <Row className='center-sm start-md end-lg'>Another text2.</Row>
          <Row>Another text3.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
      </Row>
    </Container>
    <Container fluid>
      <Row>
        Another short text.
      </Row>
    </Container>
  </React.Fragment>
)
```

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