https://github.com/swiftcarrot/react-grid

react grid component
https://github.com/swiftcarrot/react-grid

react react-component

Last synced: 2 months ago
JSON representation

react grid component

• Host: GitHub
• URL: https://github.com/swiftcarrot/react-grid
• Owner: swiftcarrot
• License: mit
• Created: 2018-12-03T10:22:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:10:32.000Z (over 2 years ago)
• Last Synced: 2025-03-29T20:05:02.464Z (3 months ago)
• Topics: react, react-component
• Language: JavaScript
• Homepage: https://swiftcarrot.dev/react-grid
• Size: 706 KB
• Stars: 17
• Watchers: 3
• Forks: 4
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-grid

[![npm](https://img.shields.io/npm/v/react-grid.svg)](https://www.npmjs.com/package/react-grid)

[![npm](https://img.shields.io/npm/dm/react-grid.svg)](https://www.npmjs.com/package/react-grid)

[![Build Status](https://travis-ci.org/swiftcarrot/react-grid.svg?branch=master)](https://travis-ci.org/swiftcarrot/react-grid)

[![codecov](https://codecov.io/gh/swiftcarrot/react-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/swiftcarrot/react-grid)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

React grid component

### Installation

```sh

npm install react-grid --save

yarn add react-grid

```

### Demo

[https://swiftcarrot.dev/react-grid](https://swiftcarrot.dev/react-grid)

### Basic Usage

```javascript

import React from 'react';

import { Container, Row, Col } from 'react-grid';

function App() {

  return (

    

      

        

        

      

    

  );

}

```

### API

| bootstrap css class   | component                       |

| --------------------- | ------------------------------- |

| .container            | ``                  |

| .container-fluid      | ``            |

| .row                  | ``                       |

| .row.no-gutters       | ``             |

| .col                  | ` ()`           |

| .col-sm               | ``                    |

| .col-md-auto          | ``             |

| .col-6                | ``                |

| .col-md-6             | ``                |

| .col.order-12         | ``       |

| .col-md-4.offset-md-4 | `` |

#### Container

```javascript

```

#### Row

```javascript

```

#### Col

```javascript

```

### Customize

#### with props

```javascript

// grid.js

import {

  Container as ReactContainer,

  Row as ReactRow,

  Col as ReactCol

} from 'react-grid';

const styles = {

  breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },

  containerMaxWidths: { sm: 540, md: 720, lg: 960, xl: 1140 },

  columns: 12,

  gutterWidth: 30

};

export const Container = props => ;

export const Row = props => ;

export const Col = props => ;

// app.js

import { Container, Row, Col } from './grid';

const App = () => (

  

    

      

      

    

  

);

```

### breakpoints

react-grid implments breakpoint functions similar to bootstrap grid:

- mediaBreakpointUp

- mediaBreakpointDown

- mediaBreakpointBetween

- mediaBreakpointOnly

```javascript

/** @jsx jsx */

import { jsx, css } from '@emotion/core';

import { mediaBreakpointUp } from 'react-grid';

const App = () => (

  


);


// or

const App = () => (

  


);

```


### License

MIT