The Cherry Grid system simplifies creating responsive layouts using the modern CSS grid property. It allows you to define the grid structure, including the number of columns and the gaps.
<Container>
<Grid $xsCols={1} $lgCols={3}>
<Col $lgSpan={3}>
<Input type="text" $fullWidth />
</Col>
<Button $variant="primary">Save</Button>
<Button $variant="secondary">Cancel</Button>
<Button $outline>Remind Later</Button>
</Grid>
</Container>Grid content.
Gap between grid items. Also available as responsive variants: $xsGap, $smGap, $mdGap, $lgGap, $xlGap, $xxlGap, $xxxlGap.
Number of columns. Also available as responsive variants: $xsCols, $smCols, $mdCols, $lgCols, $xlCols, $xxlCols, $xxxlCols.
Cherry theme object.
See the Col component for controlling how children span across grid columns.