# graceful-grids-js

> Creates responsive media queries with minimal JavaScript. Great for React components.

Latest version **1.0.2** (published 2017-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install graceful-grids-js
pnpm add graceful-grids-js
yarn add graceful-grids-js
bun add graceful-grids-js
```

## 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.2 |
| Published | 2017-07-11 |
| First published | 2017-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kennedy Rose |
| Maintainers | ken85rose |

## Links

- npm: https://www.npmjs.com/package/graceful-grids-js
- Repository: https://github.com/escaladesports/graceful-grids-js
- Homepage: https://github.com/escaladesports/graceful-grids-js#readme
- Issues: https://github.com/escaladesports/graceful-grids-js/issues
- npm.io page: https://npm.io/package/graceful-grids-js

## Dependencies (1)

- [csso](https://npm.io/package/csso.md) ^3.1.1

## Recent versions

- 1.0.2 (latest) — 2017-07-11
- 1.0.1 — 2017-07-11

## README

# Graceful Grids JS

Creates responsive media queries with minimal JavaScript. Great for React components.

# Installation

## npm

```bash
$ npm install --save graceful-grids-js
```

## Yarn

```bash
$ yarn add graceful-grids-js
```

# Usage

Examples are in React, but any type of JavaScript application can be used.

## Traditional 12 Column Grid

```jsx
import grid from 'graceful-grids-js'
import React from 'react'


const styles = grid({
	'400px': '4 8 8 4',
	'800px': '3 3 3 3'
})

export default class extends React.Component {
	render(){
		return (
			<div>
				{/* Takes up 4 columns on medium, then 3 on large */}
				<div>Col 1</div>
				{/* Takes up 8 columns on medium, then 3 on large */}
				<div>Col 2</div>
				{/* Takes up 8 columns on medium, then 3 on large */}
				<div>Col 3</div>
				{/* Takes up 4 columns on medium, then 3 on large */}
				<div>Col 4</div>
				<style jsx>{ styles }</style>
			</div>
		)
	}
}
```

## Block Grids

If you want to evenly space all elements in a grid.

```jsx
import grid from 'graceful-grids-js'
import React from 'react'

const styles = grid({
	'400px': 4,
	'800px': 6
})

export default class extends React.Component {
	render(){
		return (
			{/* Row will have 1 div per row on small, 4 on medium, and 6 on large & up */}
			<div>
				<div>Col 1</div>
				<div>Col 2</div>
				<div>Col 3</div>
				<div>Col 4</div>
				<div>Col 5</div>
				<div>Col 6</div>
				<div>Col 7</div>
				<div>Col 8</div>
				<style jsx>{ styles }</style>
			</div>
		)
	}
}
```

# Todo
- Options

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