# @alexanderjeurissen/grid

> A declarative React primitive Grid component that exposes css-grid specification in JSX

Latest version **2.0.0** (published 2020-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alexanderjeurissen/grid
pnpm add @alexanderjeurissen/grid
yarn add @alexanderjeurissen/grid
bun add @alexanderjeurissen/grid
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-06-24 |
| First published | 2020-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 3 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alexander Jeurissen |
| Maintainers | alexanderjeurissen |
| Keywords | styled-components, styled-system, jsx, react, css-grid, css-grid-layout, grid, component, primitive |

## Links

- npm: https://www.npmjs.com/package/@alexanderjeurissen/grid
- Repository: https://github.com/alexanderjeurissen/Grid
- Homepage: https://github.com/alexanderjeurissen/Grid#readme
- Issues: https://github.com/alexanderjeurissen/Grid/issues
- npm.io page: https://npm.io/package/@alexanderjeurissen/grid

## Dependencies (3)

- [styled-system](https://npm.io/package/styled-system.md) ^5.1.5
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.1
- [@styled-system/should-forward-prop](https://npm.io/package/@styled-system/should-forward-prop.md) ^5.1.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

- 2.0.0 (latest) — 2020-06-24

## README

![image](public/assets/logo.png)

![Publish](https://github.com/alexanderjeurissen/grid/workflows/Publish/badge.svg)

> The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. What did they look like? Ships, motorcycles? Were the circuits like freeways? I kept dreaming of a world I thought I'd never see. And then, one day I got in...

A declarative React primitive Grid component that exposes css-grid specification in JSX

Based on Styled System and Styled Components. Written in typescript to provide strict prop validation on css spec adherence.

## Usage

Import as follows:

`import Grid from 'react-grid-primitive';`

Then use the grid to define the desired css grid layout:

e.g. for a 200px height header, with a left sidebar that is 100px in width and a main content that takes up the remainder

```
<Grid gridTemplateRows='200px 1fr' gridTemplateColumns='100px 1fr'>
 <Header />
 <Sidebar />
 <Content />
</Grid>
```

## Additional resources

- https://www.w3.org/TR/css-grid-1/
- https://css-tricks.com/snippets/css/complete-guide-grid/

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