# micro-grid

> Tiny, simple, zero-dependency flexbox grid for React. Outputs real CSS. **2.6kb gzipped.**

Latest version **0.7.1** (published 2017-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install micro-grid
pnpm add micro-grid
yarn add micro-grid
bun add micro-grid
```

## 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.7.1 |
| Published | 2017-07-10 |
| First published | 2017-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | estrattonbailey |
| Maintainers | estrattonbailey |
| Keywords | react, grid, grids |

## Links

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

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## 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.7.1 (latest) — 2017-07-10
- 0.7.0 — 2017-07-10
- 0.6.0 — 2017-07-05
- 0.5.1 — 2017-07-04
- 0.5.0 — 2017-07-04
- 0.4.2 — 2017-07-04
- 0.4.1 — 2017-06-30
- 0.4.0 — 2017-06-30
- 0.3.0 — 2017-06-28
- 0.2.1 — 2017-06-26
- 0.2.0 — 2017-06-26
- 0.1.3 — 2017-06-16
- 0.1.2 — 2017-06-16
- 0.1.1 — 2017-06-16
- 0.1.0 — 2017-06-16
- … 1 more at https://npm.io/package/micro-grid/versions

## README

# micro-grid
Tiny, simple, zero-dependency flexbox grid for React. Outputs real CSS. **2.6kb gzipped.**

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com)

## Features/Goals
1. Configure widths, gutters, flex alignment, order, and offsets
2. Configure arbitrary breakpoints and values for all attributes
3. Outputs real CSS and media queries
4. Nestable
5. Relative units for breakpoints and whitespace

## Usage
Grid with four items:
```javascript
import { Flex, Box } from 'micro-grid'

<Flex>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>
```

Grid with four items and a `1em` gutter:
```javascript
<Flex gutter={1}>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>
```

Widths at different breakpoints:
```javascript
<Flex gutter={1}>
  <Box width={[
    [1/2],
    [768, 1/4]
  ]}>
    50% wide, 25% wide above 768px
  </Box>
  <Box width={[
    1,
    [768, 1/2]
    [1280, 1/4] ]}>
    100% wide, 50% wide above 768px, 25% wide above 1280px
  </Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>
```

Adjust the gutter at different breakpoints:
```javascript
<Flex gutter={[
  1,
  [768, 2]
]}>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>
```

Fixed width columns:
```javascript
<Flex gutter={1}>
  <Box width={[
    1,
    [768, '200px']
  ]}>1000% wide, 200px wide above 768px</Box>
</Flex>
```

Flexible width columns, that fill their space:
```javascript
<Flex gutter={1}>
  <Box width={[
    1,
    [768, '200px']
  ]}>1000% wide, 200px wide above 768px</Box>
  <Box width={[
    1,
    [768, 'auto']
  ]}>1000% wide, fills remainging space above 768px</Box>
</Flex>
```

Allow boxes to wrap:
```javascript
<Flex gutter={1} wrap={true}>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
</Flex>
```

Allow boxes to wrap at different breakpoints:
```javascript
<Flex gutter={1} wrap={[
  [true],
  [768, false]
]}>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
</Flex>
```

## Notes
- breakpoints are min-width by default, with no way to configure, currently

MIT License

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