CSS Grid based layout renderer based on styled-components and styled-system
CSS Grid based layout renderer based on styled-components and styled-system
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
.
NPM Link
Lattice is a standard CSS Grid approach to create make layouting a breeze in your React apps.
It has support for making bootstrap like responsive layouts very easily in CSS in JS ecosystems, making it very suitable for modern day React ecosystem
Following Peer Dependencies are required for using uselattice package:
- react: "^16.0.0"
npm install --save @mollycule/lattice
yarn add @mollycule/latticeimport React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { Grid, Cell as BaseCell, BREAKPOINTS } from '@mollycule/lattice'
const Cell = styled(BaseCell)`
min-height: 50px;
background: mediumslateblue;
color: white;
`
const App = () => (
<ThemeProvider theme={{ breakpoints: BREAKPOINTS }}>
<Grid
width='70vw'
mx='auto'
gap='3px'
cols={{ xs: 2, sm: 3, md: 4 }}
height='500px'
alignContent='center'
alignItems='center'
justifyContent='center'
justifyItems='start'
>
<Cell x-offset='3' x-span='2'>
1
</Cell>
<Cell y-offset={{ sm: '2', md: '1' }} y-span={{ sm: '1', md: '2' }}>
2
</Cell>
<Cell>
<Box pt='5px' fontWeight='bold' color='aqua'>
3
</Box>
</Cell>
<Cell x-span={{ sm: '2', md: '1' }}>4</Cell>
</Grid>
</ThemeProvider>
)The library exports Grid, Cell and a general usage Box for general use divs. Using these, there won't be a need of writing a styled component ever. All the particular styles can be inlined by virtue of styled-system properties.
The styled components being extendable makes the generic Box component to be wrapped around for more specific frequently used elements when needed.
| Prop Name | Value Type | Example | Mapped CSS property |
|---|---|---|---|
| gap | string | gap='2px' |
grid-gap |
| rowGap | string | rowGap='2px' |
grid-row-gap |
| columnGap | string | columnGap='2px' |
grid-column-gap |
| alignItems | string | alignItems='center' |
align-items |
| alignContent | string | alignContent='center' |
align-content |
| justifyItems | string | justifyItems='center' |
justify-items |
| justifyContent | string | justifyContent='center' |
justify-content |
| cols | number or string | cols={2} or cols='repeat(3, minmax(200px, auto))' |
grid-template-columns |
| flow | string | flow='row' |
grid-auto-flow |
| areas | string[] | areas={['a a b', 'c c b']}' |
grid-template-areas |
| Prop Name | Value Type | Example | Mapped CSS property |
|---|---|---|---|
| area | string | area='a' |
grid-area |
| x-offset | string | x-offset='2' |
grid-column-start |
| x-span | string | x-span='2' |
grid-column-end |
| y-offset | string | y-offset='3' |
grid-row-start |
| y-span | string | y-span='2' |
grid-row-end |
All the above property values are responsive compatible, which can be specified based on the breakpoints approach of styled-system. A default breakpoint is also exported from the library based on Bootstrap responsive system.
export const BREAKPOINTS = {
xs: 0,
sm: '480px',
md: '768px',
lg: '1024px'
}
Note: Please use string values most of the time in order to prevent automatic suffixing of numeric values by 'px' in React as these custom properties don't fall under React unitless properties.
MIT © paramsinghvc
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature) - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Param Singh - @paramsinghvc - paramsinghvc@gmail.com
Project Link: https://github.com/paramsinghvc/lattice