micro-grid
v0.7.1
Published
Tiny, simple, zero-dependency flexbox grid for React. Outputs real CSS. **2.6kb gzipped.**
Downloads
42
Readme
micro-grid
Tiny, simple, zero-dependency flexbox grid for React. Outputs real CSS. 2.6kb gzipped.
Features/Goals
- Configure widths, gutters, flex alignment, order, and offsets
- Configure arbitrary breakpoints and values for all attributes
- 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 width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
</Flex>
Grid with four items and a 1em
gutter:
<Flex gutter={1}>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
</Flex>
Widths at different breakpoints:
<Flex gutter={1}>
<Box width={[
[1/2],
[768, 1/4]
]}>
50% wide, 25% wide above 768px
</Box>
<Box width={[
1,
[768, 1/2]
[1280, 1/4] ]}>
100% wide, 50% wide above 768px, 25% wide above 1280px
</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
</Flex>
Adjust the gutter at different breakpoints:
<Flex gutter={[
1,
[768, 2]
]}>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
<Box width={1/4}>25% wide</Box>
</Flex>
Fixed width columns:
<Flex gutter={1}>
<Box width={[
1,
[768, '200px']
]}>1000% wide, 200px wide above 768px</Box>
</Flex>
Flexible width columns, that fill their space:
<Flex gutter={1}>
<Box width={[
1,
[768, '200px']
]}>1000% wide, 200px wide above 768px</Box>
<Box width={[
1,
[768, 'auto']
]}>1000% wide, fills remainging space above 768px</Box>
</Flex>
Allow boxes to wrap:
<Flex gutter={1} wrap={true}>
<Box width={[
1,
[768, 1/2]
]}>100% wide, 50% wide above 768</Box>
<Box width={[
1,
[768, 1/2]
]}>100% wide, 50% wide above 768</Box>
</Flex>
Allow boxes to wrap at different breakpoints:
<Flex gutter={1} wrap={[
[true],
[768, false]
]}>
<Box width={[
1,
[768, 1/2]
]}>100% wide, 50% wide above 768</Box>
<Box width={[
1,
[768, 1/2]
]}>100% wide, 50% wide above 768</Box>
</Flex>
Notes
- breakpoints are min-width by default, with no way to configure, currently
MIT License