0.0.9-development • Published 5 years ago

linaria-css-grid v0.0.9-development

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

linaria-css-grid

Travis Prettier npm License

A lightweight CSS grid layout for React, built with linaria 💅.

demo

See the website.

installation

Install React and linaria, then:

$ yarn add linaria-css-grid

usage

import 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>
);

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 3.
  • gap: Gap between cells. Default is "8px".
  • minRowHeight: Minimum height of each row. Default is "20vh".