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!


span?number | "none"
$xsSpan?number | "none"
$smSpan?number | "none"
$mdSpan?number | "none"
$lgSpan?number | "none"
$xlSpan?number | "none"
$xxlSpan?number | "none"
$xxxlSpan?number | "none"
GridThere is no col without a Grid.

Explore the source code on GitHub: