0.1.12 • Published 8 years ago
react-grid-utilities v0.1.12
react-grid-utilities
Bootstrap v4 Grid Layout with ultilities for React
Setup
npm i react-grid-utilitiesOr
yarn add react-grid-utilitiesBasic Usage
import { Grid, Row, Col } from 'react-grid-utilities'
export const Example = () => {
return (
<Grid fluid>
<Row justifyContent="center" justifyContentMd="end">
<Col xs={12} sm={10} md={8} />
<Col xs={12} sm={10} md={8} />
<Col xs={12} sm={10} md={8} />
</Row>
</Grid>
)
}Component Props
Grid
| Prop | Required | Values | Responsive | Description |
|---|---|---|---|---|
| fluid | No | true, false | No | Full width container, spanning the entire width of the viewport |
Row
| Prop | Required | Values | Responsive | Description |
|---|---|---|---|---|
| rounded | No | true, top, left, bottom, right, 0 | No | Round element's corners. |
| alignContent | No | start, end, center, between, around, stretch | alignContent, alignContentSm, alignContentMd, alignContentLg,,alignContentXl | It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. |
| alignItems | No | start, end, center, baseline, stretch | alignItems, alignItemsSm, alignItemsMd, alignItemsLg, alignItemsXl | It defines the default behaviour for how flex items are laid out along the cross axis on the current line. |
| justifyContent | No | start, end, center, between, around | justifyContent, justifyContentSm, justifyContentMd, justifyContentLg, justifyContentXl | It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. |
| m | No | 0, 1, 2, 3, 4, 5, auto | m, mSm, mMd, mLg, mXl | Set margin for element |
| mt | No | 0, 1, 2, 3, 4, 5, auto | mt, mtSm, mtMd, mtLg, mtXl | Set margin-top for element |
| mb | No | 0, 1, 2, 3, 4, 5, auto | mb, mbSm, mbMd, mbLg, mbXl | Set margin-bottom for element |
| ml | No | 0, 1, 2, 3, 4, 5, auto | ml, mlSm, mlMd, mlLg, mlXl | Set margin-left for element |
| mr | No | 0, 1, 2, 3, 4, 5, auto | mr, mrSm, mrMd, mrLg, mrXl | Set margin-right for element |
| mx | No | 0, 1, 2, 3, 4, 5, auto | mx, mxSm, mxMd, mxLg, mxXl | Set horizontal margin for element |
| my | No | 0, 1, 2, 3, 4, 5, auto | my, mySm, myMd, myLg, myXl | Set vertical margin for element |
| p | No | 0, 1, 2, 3, 4, 5 | p, pSm, pMd, pLg, pXl | Set padding for element |
| pt | No | 0, 1, 2, 3, 4, 5 | pt, ptSm, ptMd, ptLg, ptXl | Set padding-top for element |
| pb | No | 0, 1, 2, 3, 4, 5 | pb, pbSm, pbMd, pbLg, pbXl | Set padding-bottom for element |
| pl | No | 0, 1, 2, 3, 4, 5 | pl, plSm, plMd, plLg, plXl | Set padding-left for element |
| pr | No | 0, 1, 2, 3, 4, 5 | pr, prSm, prMd, prLg, prXl | Set padding-right for element |
| px | No | 0, 1, 2, 3, 4, 5 | px, pxSm, pxMd, pxLg, pxXl | Set horizontal padding for element |
| py | No | 0, 1, 2, 3, 4, 5 | py, pySm, pyMd, pyLg, pyXl | Set vertical padding for element |
Col
| Prop | Required | Values | Responsive | Description |
|---|---|---|---|---|
| xs | No | auto, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | xs, sm, md, lg, xl | The width of column |
| order | No | 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | order, orderSm, orderMd, orderLg, orderXl | The visual order of your content |
| alignSelf | No | start, end, center, baseline, stretch, auto | alignSelf, alignSelfSm, alignSelfMd, alignSelfLg, alignSelfXl | It makes possible to override the align-items value for specific flex items. |
| rounded | No | true, top, left, bottom, right, 0 | No | Round element's corners. |
| flexDirection | No | row, row-reverse, column, column-reverse | flexDirection, flexDirectionSm, flexDirectionMd, flexDirectionLg, flexDirectionXl | It establishes the main-axis, thus defining the direction flex items are placed in the flex container. |
| flexWrap | No | wrap, wrap-reverse, nowrap | flexWrap, flexWrapSm, flexWrapMd, flexWrapLg, flexWrapXl | It defines whether the flex items are forced into a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. |
| display | No | none, inline, inline-block, block, table, table-cell, flex, inline-flex | display, displaySm, displayMd, displayLg, displayXl | Includes support for some of the more common values, as well as some extras for controlling display when printing. |
| alignContent | display="flex", display="inline-flex" | start, end, center, between, around, stretch | alignContent, alignContentSm, alignContentMd, alignContentLg,,alignContentXl | It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. |
| alignItems | display="flex", display="inline-flex" | start, end, center, baseline, stretch | alignItems, alignItemsSm, alignItemsMd, alignItemsLg, alignItemsXl | It defines the default behaviour for how flex items are laid out along the cross axis on the current line. |
| justifyContent | display="flex", display="inline-flex" | start, end, center, between, around | justifyContent, justifyContentSm, justifyContentMd, justifyContentLg, justifyContentXl | It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. |
| m | No | 0, 1, 2, 3, 4, 5, auto | m, mSm, mMd, mLg, mXl | Set margin for element |
| mt | No | 0, 1, 2, 3, 4, 5, auto | mt, mtSm, mtMd, mtLg, mtXl | Set margin-top for element |
| mb | No | 0, 1, 2, 3, 4, 5, auto | mb, mbSm, mbMd, mbLg, mbXl | Set margin-bottom for element |
| ml | No | 0, 1, 2, 3, 4, 5, auto | ml, mlSm, mlMd, mlLg, mlXl | Set margin-left for element |
| mr | No | 0, 1, 2, 3, 4, 5, auto | mr, mrSm, mrMd, mrLg, mrXl | Set margin-right for element |
| mx | No | 0, 1, 2, 3, 4, 5, auto | mx, mxSm, mxMd, mxLg, mxXl | Set horizontal margin for element |
| my | No | 0, 1, 2, 3, 4, 5, auto | my, mySm, myMd, myLg, myXl | Set vertical margin for element |
| p | No | 0, 1, 2, 3, 4, 5 | p, pSm, pMd, pLg, pXl | Set padding for element |
| pt | No | 0, 1, 2, 3, 4, 5 | pt, ptSm, ptMd, ptLg, ptXl | Set padding-top for element |
| pb | No | 0, 1, 2, 3, 4, 5 | pb, pbSm, pbMd, pbLg, pbXl | Set padding-bottom for element |
| pl | No | 0, 1, 2, 3, 4, 5 | pl, plSm, plMd, plLg, plXl | Set padding-left for element |
| pr | No | 0, 1, 2, 3, 4, 5 | pr, prSm, prMd, prLg, prXl | Set padding-right for element |
| px | No | 0, 1, 2, 3, 4, 5 | px, pxSm, pxMd, pxLg, pxXl | Set horizontal padding for element |
| py | No | 0, 1, 2, 3, 4, 5 | py, pySm, pyMd, pyLg, pyXl | Set vertical padding for element |