# Col

> Cherry Col component - responsive column spans within Grid layouts.

Source: https://cherry.al/code/col

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# 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](/code/installation) is already set up.

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

<Field value="children" type="React.ReactNode">
  Column content.
</Field>

<Field value="$span" type="number">
  Number of columns to span. Also available as responsive variants: `$xsSpan`, `$smSpan`, `$mdSpan`, `$lgSpan`, `$xlSpan`, `$xxlSpan`, `$xxxlSpan`.
</Field>

<Callout type="info">
  See the [Grid](/code/grid) component for defining the grid structure.
</Callout>

<Button href="https://github.com/cherry-design-system/styled-components/blob/main/src/lib/col.tsx" icon="code" iconPosition="left">
  View Source
</Button>