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>
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
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 |
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 |
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 |