https://github.com/nickbullll/ReactSimpleFlexGrid

A way to quickly add a Grid Layout to your React app 🚀
https://github.com/nickbullll/ReactSimpleFlexGrid

bootstrap css flexbox grid grid-layout javascript react react-native reactjs redux sass ui

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nickbullll/ReactSimpleFlexGrid
• Owner: nickbullll
• License: mit
• Created: 2017-03-31T09:28:23.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T15:23:12.000Z (over 2 years ago)
• Last Synced: 2025-03-15T15:19:52.633Z (3 months ago)
• Topics: bootstrap, css, flexbox, grid, grid-layout, javascript, react, react-native, reactjs, redux, sass, ui
• Language: JavaScript
• Homepage: https://github.com/abraztsov/ReactSimpleFlexGrid
• Size: 2.38 MB
• Stars: 186
• Watchers: 3
• Forks: 8
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

    ```

    

       Column

       Column

    

    ```

  ![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.

```

   col-4

   col-4

   col-4

```

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

### Column Offset 😃

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

```

   col-4

   col-4

```

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

### Column Order 🤙

`Order` property can easily change column order.

```

   4 col-4

   3 col-4

   2 col-4

   1 col-4

```

![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.

```

   col-4

   col-4

   col-4

```

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

---

```

   col-4

   col-4

   col-4

```

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

---

```

   col-4

   col-4

   col-4

```

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

### Responsive 💫

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

```

  xl-10

  xl-2

```

![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}}`.

```

  xs-6

  col-4

```

![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 |  |  |