@ausbom/grid

@ausbom/grid

A grid is like an invisible table that helps designers position interface elements with strong alignment and consistent spacing. Grids are made up of columns, rows, gutters, and margins.

Installation

npm install @ausbom/grid

Usage

import Grid, { Box } from '@ausbom/grid'

Demo

<Grid>
  <!-- Mobile -->
  <Box span={{ sm: 2, md: 1 }}>1</Box>
  <Box span={{ sm: 2, md: 1 }}>2</Box>
  <Box span={{ sm: 2, md: 1 }}>3</Box>
  <Box span={{ sm: 2, md: 1 }}>4</Box>
  <Box span={{ sm: 2, md: 1 }}>5</Box>
  <Box span={{ sm: 2, md: 1 }}>6</Box>
</Grid>

<Grid>
  <!-- Desktop -->
  <Box span={{ sm: 2, md: 1 }}>1</Box>
  <Box span={{ sm: 2, md: 1 }}>2</Box>
  <Box span={{ sm: 2, md: 1 }}>3</Box>
  <Box span={{ sm: 2, md: 1 }}>4</Box>
  <Box span={{ sm: 2, md: 1 }}>5</Box>
  <Box span={{ sm: 2, md: 1 }}>6</Box>
  <Box span={{ sm: 2, md: 1 }}>7</Box>
  <Box span={{ sm: 2, md: 1 }}>8</Box>
  <Box span={{ sm: 2, md: 1 }}>9</Box>
  <Box span={{ sm: 2, md: 1 }}>10</Box>
  <Box span={{ sm: 2, md: 1 }}>11</Box>
  <Box span={{ sm: 2, md: 1 }}>12</Box>
</Grid>