• DocumentationDocs

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.

PropertyDescriptionType
idDefines element idString
classNameDefines element class nameString
childrenChildren elementsReactNode
fluidExtend container width to max allowedBoolean
textAlignAlign text"right" | "left" | "center"
themeEmotion theme configurationObject

Row classes

Below you can find all the available props for the row component.

PropertyDescriptionType
idDefines element idString
classNameDefines element class nameString
childrenChildren elementsReactNode
alignItemsFlex align-items property"stretch" | "center" | "flex-start" | "flex-end" | "baseline" | "initial"
justifyContentFlex justify-content property"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "initial"
gutterXsDefines the gutter for XL media query"default" | "medium" | "big"
gutterSmDefines the gutter for SM media query"default" | "medium" | "big"
gutterMdDefines the gutter for MD media query"default" | "medium" | "big"
gutterLgDefines the gutter for LG media query"default" | "medium" | "big"
gutterXlDefines the gutter for XL media query"default" | "medium" | "big"
gutterXxlDefines the gutter for XXL media query"default" | "medium" | "big"
gutterXxxlDefines the gutter for XXXL media query"default" | "medium" | "big"
themeEmotion theme configurationObject

Columns classes

Below you can find all the available props for the column component.

PropertyDescriptionType
idDefines element idString
classNameDefines element class nameString
childrenChildren elementsReactNode
textAlignAlign text"right" | "left" | "center"
xsDefines the columns layout for SM media queryNumber | "auto"
smDefines the columns layout for SM media queryNumber | "auto"
mdDefines the columns layout for MD media queryNumber | "auto"
lgDefines the columns layout for LG media queryNumber | "auto"
xlDefines the columns layout for XL media queryNumber | "auto"
xxlDefines the columns layout for XXL media queryNumber | "auto"
xxxlDefines the columns layout for XXXL media queryNumber | "auto"
firstXsOrder column as first on XSBoolean
firstSmOrder column as first on SMBoolean
firstMdOrder column as first on MDBoolean
firstLgOrder column as first on LGBoolean
firstXlOrder column as first on XLBoolean
firstXxlOrder column as first on XXLBoolean
firstXxxlOrder column as first on XXXLBoolean
lastXsOrder column as last on XSBoolean
lastSmOrder column as last on SMBoolean
lastMdOrder column as last on MDBoolean
lastLgOrder column as last on LGBoolean
lastXlOrder column as last on XLBoolean
lastXxlOrder column as last on XXLBoolean
lastXxxlOrder column as last on XXXLBoolean
displayDisplay property"block" | "inline" | "inline-block" | "flex" | "inline-flex" | "none"
fullScreenMake element full heightBoolean
themeEmotion theme configurationObject
Spacing ComponentEmotion Breakpoints

Follow the creator

Join the community