AI Assistant

Col

The Col component complements the Grid component by allowing you to create responsive column layouts. Specify the number of columns a child element should occupy.

The example below assumes the Cherry theme provider from Installation is already set up.

import React from "react";
import { Container, Grid, Col, Input, Button } from "cherry-styled-components";

export default function Page() {
  return (
    <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 Col wrapping the Input spans 1 column on xs screens and all 3 columns on lg screens.
  • The three Buttons each span 1 column at all breakpoints.

Properties

childrenReact.ReactNode

Column content.

$spannumber

Number of columns to span. Also available as responsive variants: $xsSpan, $smSpan, $mdSpan, $lgSpan, $xlSpan, $xxlSpan, $xxxlSpan.

See the Grid component for defining the grid structure.

Grid PreviousSpaceNext
DiscordFigma TemplateFigma PluginGitHub