Col - Develop

The Col component complements the Grid component by allowing you to create responsive column layouts. You can specify the number of columns a child element should occupy. For instance:


<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>

In this example:

The first column spans 1 column on extra small screens xs and 3 columns on large screens lg.
The second and third column will span 1 column on extra small screens xs and 1 column on large screens lg, so no change for these ones.

Cherry’s grid components provide a powerful and flexible way to create layouts for your applications. Customize them further based on your project’s needs!

Properties

Property	Description
children	React.ReactNode
span?	number \| "none"
$xsSpan?	number \| "none"
$smSpan?	number \| "none"
$mdSpan?	number \| "none"
$lgSpan?	number \| "none"
$xlSpan?	number \| "none"
$xxlSpan?	number \| "none"
$xxxlSpan?	number \| "none"
theme?	Theme

GridThere is no col without a Grid.

Explore the source code on GitHub:

Col