# react-sigrid

> A lightweight, responsive simple grid

Latest version **0.1.1** (published 2016-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-sigrid
pnpm add react-sigrid
yarn add react-sigrid
bun add react-sigrid
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2016-07-06 |
| First published | 2016-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Michael Sinov |
| Maintainers | sihaelov |
| Keywords | react, react-component, grid, responsive |

## Links

- npm: https://www.npmjs.com/package/react-sigrid
- Repository: https://github.com/sihaelov/react-sigrid
- Issues: https://github.com/sihaelov/react-sigrid/issues
- npm.io page: https://npm.io/package/react-sigrid

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.1.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## 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

- 0.1.1 (latest) — 2016-07-06
- 0.1.0 — 2016-07-05

## README

# React (Si)mple (grid)

A lightweight, responsive simple grid component for React.

## Installation

```js
npm install react-sigrid
```

## Usage

A part of Sigrid is to build using `<Col />` which are inside of `<Row />`

```js

import {Row, Col} from 'react-sigrid'

<Row>
    <Col small={12} medium={9} large={7}></Col>
    <Col small={12} medium={3} large={5}></Col>
</Row>
```

You can offset a column as you wish.

```js
import {Row, Col} from 'react-sigrid'

<Row>
    <Col medium={3} mediumOffset={9} large={5} largeOffset={7}></Col>
</Row>
```

## Screen Sizes

             | Mobile Devices (<= 600px) | Tablet Devices (<= 992px) | Desktop Devices (> 992px)
------------ | --------------------------|---------------------------|--------------------------
Prefix       | small                     | medium                    | large
Number of Columns | 12                   | 12                        | 12


## Props

Name         | Type | Description
-------------|------|------------ 
children     |node  | Can be used to render elements inside the Column.
className    |string| The css class name of the column.


#### Columns

Name   | Type |
-------|------| 
small  |number|
medium |number|
large  |number|


#### Offset

Name         | Type 
-------------|------
smallOffset  |number
mediumOffset |number
largeOffset  |number


## License

MIT

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