/lil-grid

A tiny grid for styled-components.

Primary LanguageJavaScript

Lil Grid

npm bundle size npm

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.