Package Exports

styled-css-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-css-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`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:

$ yarn add styled-css-grid

usage

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

const MyGrid = () => (
  <Grid columns={2} gap="2px">
    <Cell>foo</Cell>
    <Cell height={2}>bar</Cell>
    <Cell width={2}>baz</Cell>
  </Grid>
);

api

`Cell`

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.

`Grid`

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: Gap between cells. Default is "8px".
minRowHeight: Minimum height of each row. Default is "20px".
flow: The grid-auto-flow CSS property. Default is "row".
rows: The grid-template-rows CSS property. Not provided by default.