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.