@rentalutions/griddeprecated

A flex grid layout

Usage no npm install needed!

<script type="module">
  import rentalutionsGrid from 'https://cdn.skypack.dev/@rentalutions/grid';
</script>

README

A Flexible Grid Package. Use it, or don't

Just a small grid built with styled-components. Grids should be modern and easy. Tested down to IE8.

Installation

yarn add @rentalutions/grid

Documentation

  1. API
  2. Examples

API

Row

<Row></Row>

Properties:

  • columns: an optional column prop. Defaults to 12

Column

<Column></Column>

Properties:

  • sm: span on small screens
  • md: span on medium screens
  • lg: span on large screens
  • offset: number of columns pushed right

Examples

import { Column, Row } from '@rentalutions/grid'

const App = props => (
  <Row columns={12}> // columns default to 12
    <Column sm={3}>
      hello column 1
    </Column>
    <Column sm={3}>
      hello column 2
    </Column>
    <Column sm={3}>
      hello column 3
    </Column>
    <Column sm={3}>
      hello column 4
    </Column>
  </Row>
)