styled-css-grid 🍱


> A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.

examples

See the [website].

installation

Install React and [styled-components], then:

``bash
$ yarn add styled-css-grid
`

usage

`jsx
import React from "react";
import { Grid, Cell } from "styled-css-grid";

const MyGrid = () => (

foo
bar
baz

);
`

api

$3

Wrap your cells in Grid. Pretty simple.

Props:

* columns: The [grid-template-columns] CSS property. When a number is passed
it is a shorthand to specify the number of columns. Default is 12.
* gap: The [grid-gap] CSS property. Default is "8px".
* columnGap: The [column-gap] CSS property. Not provided by default.
* rowGap: The [row-gap] CSS property. Not provided by default.
* minRowHeight: Minimum height of each row. Default is "20px".
* height: The [height] CSS property. Default is "auto".
* flow: The [grid-auto-flow] CSS property. Default is "row".
* rows: The [grid-template-rows] CSS property. When a number is passed
it is a shorthand to specify the number of rows. Not provided by default.
* areas: The [grid-template-areas] CSS property. Pass an array of strings, e.g. ["a a", "b c"]. Not provided by default.
* justifyContent: The [justify-content] CSS property. Not provided by default.
* alignContent: The [align-content] CSS property. Not provided by default.

$3

A cell. Not too much to say...

Props:

* width: Cell width in units, default is 1.
* height: Cell height in units, default is 1.
* left: The [grid-column-start] CSS property. Not provided by default.
* top: The [grid-row-start] CSS property. Not provided by default.
* middle: Vertically align the contents of the cell. Default is false.
* center: Horizontally align the text contents of the cell. Default is false.
* area`: The [grid-area] CSS property. Not provided by default.

browser support

_[caniuse]_

You can use CSS grid in production _today_ if you don't need to support IE and Edge, or you're building tooling or internal sites where you only need to support one browser.

You can use CSS grid _soon_ if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec.

!Can I use?

[website]: https://styled-css-grid.js.org/
[CSS grid]: https://mdn.io/CSS_Grid_Layout
[styled-components]: https://github.com/styled-components/styled-components
[grid-auto-flow]: https://mdn.io/grid-auto-flow
[grid-row-start]: https://mdn.io/grid-row-start
[grid-column-start]: https://mdn.io/grid-column-start
[grid-template-columns]: https://mdn.io/grid-template-columns
[grid-template-rows]: https://mdn.io/grid-template-rows
[grid-template-areas]: https://mdn.io/grid-template-areas
[grid-area]: https://mdn.io/grid-area
[height]: https://mdn.io/css-height
[grid-gap]: https://mdn.io/grid-gap
[column-gap]: https://mdn.io/column-gap
[row-gap]: https://mdn.io/row-gap
[justify-content]: https://mdn.io/justify-content
[align-content]: https://mdn.io/align-content
[caniuse]: http://caniuse.com/#feat=css-grid