Grid system based on flexboxgrid2 and styled-components for React
$ npm install @krystiankoper/styled-flexboxgrid --save
or
$ yarn add @krystiankoper/styled-flexboxgrid
styled-flexboxgrid depends on these peer dependencies:
prop-types@^15.5.4react@^15.0.0 || ^16.0.0react-dom@^^15.0.0 || ^16.0.0styled-components@2
You have to install them in your project.
import React from 'react';
import { Container, Row, Col } from '@krystiankoper/styled-flexboxgrid';
class App extends React.Component {
render() {
return (
<Container fluid>
<Row>
<Col xs={12} sm={6} md={3} lg={2} xl={1}>
Styled FlexboxGrid
</Col>
</Row>
</Container>
);
}
}| Props | Type | Value | Style |
|---|---|---|---|
fluid |
Boolean |
true | padding-right: 1rem; padding-left: 1rem; Without fixed widths for breakpoints |
fluid |
Boolean |
false | padding-right: 0.5rem; padding-left: 0.5rem; Fixed widths for breakpoints |
| Props | Type | Value | Style |
|---|---|---|---|
reverse |
Boolean |
true | flex-direction: column-reverse; |
reverse |
Boolean |
false | flex-direction: column; |
xs sm md lg xl |
Boolean |
true | flex-grow: 1; flex-basis: 0; max-width: 100%; |
xs sm md lg xl |
Boolean |
false | display: none; |
xs sm md lg xl |
Integer |
1-12 | flex-basis: ((100 / 12) * value)% max-width: ((100 / 12) * value)% |
xsOffset smOffset mdOffset lgOffset xlOffset |
Integer |
1-12 | margin-left: ((100 / 12) * value)% |
| Props | Type | Value | Style |
|---|---|---|---|
reverse |
Boolean |
true | flex-direction: row-reverse; |
reverse |
Boolean |
false | flex-direction: row; |
start |
One of type |
xs sm md lg xl |
justify-content: flex-start; |
center |
One of type |
xs sm md lg xl |
justify-content: center; |
end |
One of type |
xs sm md lg xl |
justify-content: flex-end; |
top |
One of type |
xs sm md lg xl |
align-items: flex-start; |
middle |
One of type |
xs sm md lg xl |
align-items: center; |
bottom |
One of type |
xs sm md lg xl |
align-items: flex-end; |
around |
One of type |
xs sm md lg xl |
justify-content: space-around; |
between |
One of type |
xs sm md lg xl |
justify-content: space-between; |
first |
One of type |
xs sm md lg xl |
order: -1; |
last |
One of type |
xs sm md lg xl |
order: 1; |
MIT © krystiankoper
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent