Grid Components
Cherry grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
<Container>
<Row>
<Col xs={6} lg={4}>
<div>Child 1</div>
</Col>
<Col xs={6} lg={4}>
<div>Child 2</div>
</Col>
<Col xs={12} lg={4}>
<div>Child 3</div>
</Col>
</Row>
</Container>🖥 Desktop
Child 1
Child 2
Child 3
📱 Mobile
Child 1
Child 2
Child 3
Container Props
Below you can find all the available props for the container component.
| Property | Description | Type |
|---|---|---|
| id | Defines element id | String |
| className | Defines element class name | String |
| children | Children elements | ReactNode |
| fluid | Extend container width to max allowed | Boolean |
| textAlign | Align text | "right" | "left" | "center" |
| theme | Emotion theme configuration | Object |
Row Props
Below you can find all the available props for the row component.
| Property | Description | Type |
|---|---|---|
| id | Defines element id | String |
| className | Defines element class name | String |
| children | Children elements | ReactNode |
| alignItems | Flex align-items property | "stretch" | "center" | "flex-start" | "flex-end" | "baseline" | "initial" |
| justifyContent | Flex justify-content property | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "initial" |
| gutterXs | Defines the gutter for XL media query | "default" | "medium" | "big" |
| gutterSm | Defines the gutter for SM media query | "default" | "medium" | "big" |
| gutterMd | Defines the gutter for MD media query | "default" | "medium" | "big" |
| gutterLg | Defines the gutter for LG media query | "default" | "medium" | "big" |
| gutterXl | Defines the gutter for XL media query | "default" | "medium" | "big" |
| gutterXxl | Defines the gutter for XXL media query | "default" | "medium" | "big" |
| gutterXxxl | Defines the gutter for XXXL media query | "default" | "medium" | "big" |
| theme | Emotion theme configuration | Object |
Columns Props
Below you can find all the available props for the column component.
| Property | Description | Type |
|---|---|---|
| id | Defines element id | String |
| className | Defines element class name | String |
| children | Children elements | ReactNode |
| textAlign | Align text | "right" | "left" | "center" |
| xs | Defines the columns layout for SM media query | Number | "auto" |
| sm | Defines the columns layout for SM media query | Number | "auto" |
| md | Defines the columns layout for MD media query | Number | "auto" |
| lg | Defines the columns layout for LG media query | Number | "auto" |
| xl | Defines the columns layout for XL media query | Number | "auto" |
| xxl | Defines the columns layout for XXL media query | Number | "auto" |
| xxxl | Defines the columns layout for XXXL media query | Number | "auto" |
| firstXs | Order column as first on XS | Boolean |
| firstSm | Order column as first on SM | Boolean |
| firstMd | Order column as first on MD | Boolean |
| firstLg | Order column as first on LG | Boolean |
| firstXl | Order column as first on XL | Boolean |
| firstXxl | Order column as first on XXL | Boolean |
| firstXxxl | Order column as first on XXXL | Boolean |
| lastXs | Order column as last on XS | Boolean |
| lastSm | Order column as last on SM | Boolean |
| lastMd | Order column as last on MD | Boolean |
| lastLg | Order column as last on LG | Boolean |
| lastXl | Order column as last on XL | Boolean |
| lastXxl | Order column as last on XXL | Boolean |
| lastXxxl | Order column as last on XXXL | Boolean |
| display | Display property | "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "none" |
| fullScreen | Make element full height | Boolean |
| theme | Emotion theme configuration | Object |
