Package Exports

micro-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (micro-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

micro-grid

Tiny, simple, zero-dependency flexbox grid for React.

Features/Goals

Configure widths, gutters, and flex alignment
Configure arbitrary breakpoints and widths
Outputs Real CSS™ and media queries
Nestable
Relative units for breakpoints and whitespace

Usage

Grid with four items:

import { Flex, Box } from 'micro-grid'

<Flex>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
</Flex>

Grid with four items and a 1em gutter:

<Flex g={1}>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
</Flex>

Widths at different breakpoints:

<Flex g={1}>
  <Box w={[
    [1/2],
    [768, 1/4]
  ]}>
    50% wide, 25% wide above 768px
  </Box>
  <Box w={[
    [1],
    [768, 1/2]
    [1280, 1/4]
  ]}>
    100% wide, 50% wide above 768px, 25% wide above 1280px
  </Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
</Flex>

Adjust the gutter at different breakpoints:

<Flex g={[
  [1],
  [768, 2]
]}>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
  <Box w={1/4}>25% wide</Box>
</Flex>

Notes

breakpoints are min-width by default, with no way to configure, currently

MIT License