# react-simple-flex-grid

> ReactSimpleFlexGrid ================= [![npm version](https://badge.fury.io/js/react-simple-flex-grid.svg)](https://badge.fury.io/js/react-simple-flex-grid)

Latest version **1.3.21** (published 2019-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-simple-flex-grid
pnpm add react-simple-flex-grid
yarn add react-simple-flex-grid
bun add react-simple-flex-grid
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.21 |
| Published | 2019-11-29 |
| First published | 2017-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 60.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 184 |
| Author | Nikita Abraztsov |
| Maintainers | abraztsov |
| Keywords | react, react-grid, grid, react simple grid, flexbox grid, 12 grid |

## Links

- npm: https://www.npmjs.com/package/react-simple-flex-grid
- Repository: https://github.com/abraztsov/ReactSimpleFlexGrid
- Homepage: https://github.com/abraztsov/ReactSimpleFlexGrid#readme
- Issues: https://github.com/abraztsov/ReactSimpleFlexGrid/issues
- npm.io page: https://npm.io/package/react-simple-flex-grid

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.3.21 (latest) — 2019-11-29
- 1.3.2 — 2019-11-29
- 1.3.1 — 2019-11-29
- 1.3.0 — 2019-11-29
- 1.2.3 — 2018-06-11
- 1.2.2 — 2018-06-07
- 1.2.1 — 2017-11-10
- 1.2.0 — 2017-11-10
- 1.1.0 — 2017-04-07
- 1.0.3 — 2017-04-05
- 1.0.2 — 2017-04-03
- 1.0.1 — 2017-04-02

## README

ReactSimpleFlexGrid
=================
[![npm version](https://badge.fury.io/js/react-simple-flex-grid.svg)](https://badge.fury.io/js/react-simple-flex-grid)


A way to quickly add a Flexbox Grid Layout to your app 🚀

Layout based on 12 Grids System.

![demo](http://i.imgur.com/QCegsAg.gif)

Basic Usage
-----

1. Install via `npm` and `yarn`

    ```
    npm i -S react-simple-flex-grid
    
    // or
    
    yarn add react-simple-flex-grid
    ```
2. Import `Row`, `Col` and grid styles

    ```
    import { Row, Col } from 'react-simple-flex-grid';
    import "react-simple-flex-grid/lib/main.css";
    ```
3. Enjoy
    ```
    <Row>
       <Col span={6}>Column</Col>
       <Col span={6}>Column</Col>
    </Row>
    ```

  ![Imgur](http://i.imgur.com/UpGfkrh.png)

Customize
-----

Basic steps to customize grid.

### Gutter 🌟

You can use the `gutter` (px) property of `Row` as grid spacing.

```
<Row gutter={40}>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/xMjJwku.png)

### Column Offset 😃

`Offset` can set the column to the right side.

```
<Row gutter={40}>
   <Col span={4} offset={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/L2ZuRpa.png)

### Column Order 🤙

`Order` property can easily change column order.

```
<Row gutter={40}>
   <Col span={4} order={4}>4 col-4</Col>
   <Col span={4} order={3}>3 col-4</Col>
   <Col span={4} order={2}>2 col-4</Col>
   <Col span={4} order={1}>1 col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/7GQVn2D.png)

### Column Sort 🤘

Flexbox params `start`, `center`, `end`, `space-between` and `space-around` can be passed to `Row` and sort columns inside.

```
<Row gutter={40} justify="start" align="top">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/mk0x5P1.png)

---

```
<Row gutter={40} justify="center" align="bottom">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/EcsT2MC.png)


---

```
<Row gutter={40} justify="end" align="middle">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/O7lLHrr.png)

### Responsive 💫

Based on Bootstrap media queries here five dimensions: `xs`, `sm`, `md`, `lg`, `xl`.

```
<Row gutter={40}>
  <Col xs={2} sm={4} md={6} lg={8} xl={10}>xl-10</Col>
  <Col xs={10} sm={8} md={6} lg={4} xl={2}>xl-2</Col>
</Row>
```

![Imgur](http://i.imgur.com/uzX6yOb.png)

### Exotic Responsive 🏝️

`Span` and `offset` property can be embedded into `xs`, `sm`, `md`, `lg`, `xl` such as `xl = {{span: 10}}`.

```
<Row gutter={40}>
  <Col xs={{ span: 6, offset: 2 }}>xs-6</Col>
  <Col span={4}>col-4</Col>
</Row>
```

![Imgur](http://i.imgur.com/kiYepgp.png)

## API

### Row

| Property | Description                                                                                         | Type   | Default |
|----------|-----------------------------------------------------------------------------------------------------|--------|---------|
| gutter   | grid spacing                                                                                        | number | 0       |
| align    | the vertical alignment of the layout of flex: `top` `middle` `bottom` `stretch`                     | string | start   |
| justify  | horizontal arrangement of the layout of flex: `start` `end` `center` `space-around` `space-between` | string | start   |

### Col

| Property | Description                                                                            | Type          | Default |
|----------|----------------------------------------------------------------------------------------|---------------|---------|
| span     | the number of cells,0 corresponds to display: none                                     | number        | none    |
| offset   | the number of cells to the left of the grid spacing, no cell in grid spacing           | number        | 0       |
| order    | `col` number in the row            | number        | none       |
| xs       | <768px and also default setting, could be a span value or a object contain above props | number/object | -       |
| sm       | ≥768px, could be a span value or a object contain above props                          | number/object | -       |
| md       | ≥992px, could be a span value or a object contain above props                          | number/object | -       |
| lg       | ≥1200px, could be a span value or a object contain above props                         | number/object | -       |
| xl       | ≥1600px, could be a span value or a object contain above props                         | number/object | -       |

How to test example locally ?
---
1. `git clone https://github.com/abraztsov/ReactSimpleFlexGrid.git`
2. `cd ReactSimpleFlexGrid`
3. `npm start`
4. Go to `localhost:8080`

Feature Requests / Find Bug ?
---

Have an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!


FAQ
-----

This component based on [ant design grid]( https://ant.design/components/grid/). Huge thanks them for a such an awesome work.

### Updates

You can see table for update information.

| No.  |  Version  | Breakdown  | Ket. |
| :------------: | :------------: | ------------ | ------------ |
| 1.  | 1.0.1  |   | First Release |
| 2.  | 1.0.2  | - Added autoprefixer |  |
|     |        |  - Fixed Safari bug| |
| 3.  | 1.0.3  | Removed unnecessary package  | | 
| 4.  | 1.1.0  |  Added order parameter  |  |  |
| 5.  | 1.3.0  |  Added stretch option to align property |  |  |

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