styled-css-grid

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.
• area: The grid-area CSS property. Not provided by default.

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.
• areas: The grid-template-areas CSS property. Pass an array of strings, e.g. ["a a", "b c"]. Not provided by default.