# react-cxs-grid

> React grid system built with cxs

Latest version **1.0.0-beta.1** (published 2016-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cxs-grid
pnpm add react-cxs-grid
yarn add react-cxs-grid
bun add react-cxs-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.0.0-beta.1 |
| Published | 2016-09-06 |
| First published | 2016-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brent Jackson |
| Maintainers | jxnblk |
| Keywords | react, react-component, grid, css, css-in-js, cxs |

## Links

- npm: https://www.npmjs.com/package/react-cxs-grid
- npm.io page: https://npm.io/package/react-cxs-grid

## Dependencies (1)

- [react-cxs-hoc](https://npm.io/package/react-cxs-hoc.md) ^1.0.0-beta.1

## 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.0.0-beta.1 (latest) — 2016-09-06

## README

# react-cxs-grid

React grid system built with [cxs](https://github.com/jxnblk/cxs)

```sh
npm i react-cxs-grid
```

- Grid layout based on `display: inline-block`
- Fully encapsulated CSS using cxs
- No external CSS dependencies
- Simple API that promotes composability

```jsx
// Example
import React from 'react'
import Grid from 'react-cxs-grid'

class App extends React.Component {
  render () {
    return (
      <div>
        <Grid sm={4} px={2}>
          Left Column
        </Grid>
        <Grid sm={8} px={2}>
          Right Column
        </Grid>
      </div>
    )
  }
}

export default App
```

## Props

prop    | type   | description
--------|--------|------------
`x`     | number | Either a number from 0–1 or 2–12 that represents a percentage width or number of columns in a 12-column grid
`sm`    | number | Width from the `sm` breakpoint and up
`md`    | number | Width from the `md` breakpoint and up
`lg`    | number | Width from the `lg` breakpoint and up
`px`    | number | Left and right padding as a number 0–6 representing a step on the spacing scale
`align` | string | Sets vertical-align, either `top`, `middle`, `bottom`, or `baseline`

MIT License

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