Lil Grid

A tiny grid for styled-components and style-system.

Installation

npm install react react-dom styled-components styled-system lil-grid

Usage

import { Grid, Col } from "lil-grid"

export default () => {
  return (
    <Grid>
      <Col span={[12, 6, 4]}>
        I will be 12 columns at the smallest size, then 6, then 4.
      </Col>
    </Grid>
  )
}

Grid Props

Styled Props

space, layout, flexbox, grid

Name	Type	Default	Description
columns	number	12	A shorthand for grid-template-columns: repeat(n, 1fr) where n is your column count.

Col Props

space, layout, flexbox, grid, color, background

Name	Type	Default	Description
span	[number]	null	The amount of column places for the element to span.
offset	[number]	null	The amount of column places to offset the start of the element by.
spanRow	[number]	null	The amount of row places for the element to span.
offsetRow	[number]	null	The amount of column places to offset the start of the element by.