A lightweight CSS grid layout for React, built with linaria 💅.
See the website.
Install React and [linaria``], then:
$ yarn add linaria-css-gridimport React from "react";
import { Grid, Cell } from "linaria-css-grid";
const MyGrid = () => (
<Grid columns={2} gap="2px">
<Cell>foo</Cell>
<Cell height={2}>bar</Cell>
<Cell width={2}>baz</Cell>
</Grid>
);A cell. Not too much to say...
Props:
width: Cell width in units, default is1.height: Cell height in units, default is1.
Wrap your cells in Grid. Pretty simple.
Props:
columns: Number of columns to draw, default is3.gap: Gap between cells. Default is"8px".minRowHeight: Minimum height of each row. Default is"20vh".