styled-css-grid
A tiny (~2kb) CSS grid layout for React, built with styled-components 💅.
demo
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
.
Grid
Wrap your cells in Grid
. Pretty simple.
Props:
columns
: Number of columns to draw, default is 12
.gap
: Gap between cells. Default is "8px"
.minRowHeight
: Minimum height of each row. Default is "20px"
.