1.6.0 • Published 3 years ago
@happyfresh/grid v1.6.0
Grid
Grid based on the flex display property. Grid packages consists of Container, Row, and Column. This grid system support responsive divs based on 3 breakpoints: mobile (width < 768px), tablet (768 > width < 992), and desktop (width > 992). You can also insert styles props if you want to override current css.
source: http://flexboxgrid.com/ with a few modification.
Installation
yarn add @happyfresh/grid
Usage
import { Container, Column, Row } from '@happyfresh/grid';
export const Example = () => (
<React.Fragment>
<Container fluid styles={{backgroundColor: 'black'}}>
<Row styles={{backgroundColor: 'white'}}>
<Column sm={12} md={6} lg={3}>
<Row>
<Column sm={12} md={6} lg={6} className='start-md end-lg'>
text
</Column>
<Column sm={12} md={6} lg={6} className='start-md end-lg'>
text
</Column>
</Row>
</Column>
<Column reverse sm={12} md={6} lg={3}>
<Row className='center-sm start-md end-lg'>Another text2.</Row>
<Row>Another text3.</Row>
</Column>
<Column sm={12} md={6} lg={3}>
<Row>Another text2.</Row>
</Column>
<Column sm={12} md={6} lg={3}>
<Row>Another text2.</Row>
</Column>
</Row>
</Container>
<Container fluid>
<Row>
Another short text.
</Row>
</Container>
</React.Fragment>
)
1.6.0
3 years ago
1.4.1
3 years ago
1.5.0
4 years ago
1.3.1
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.1
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.0.14
4 years ago
1.1.0
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago