# Grid

> Cherry Grid component - responsive CSS grid layouts.

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

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

# Grid

<iframe className="light-only" src="https://demo.cherry.al/preview/grid?theme=light" title="Grid" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/grid?theme=dark" title="Grid" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

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.

```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>
  );
}
```

## Properties

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

<Field value="$gap" type='number | "none"'>
  Gap between grid items in pixels. Defaults to the theme's `gridGap` (`20px` below the `lg` breakpoint, `40px` from `lg` up). Also available as responsive variants: `$xsGap`, `$smGap`, `$mdGap`, `$lgGap`, `$xlGap`, `$xxlGap`, `$xxxlGap`. Note that `"none"` only maps to `0` on the responsive variants; on the base `$gap` prop it falls back to the theme default, so use `$gap={0}` to remove the gap at all sizes.
</Field>

<Field value="$cols" type="number">
  Number of columns. Defaults to `3`. Also available as responsive variants: `$xsCols`, `$smCols`, `$mdCols`, `$lgCols`, `$xlCols`, `$xxlCols`, `$xxxlCols`.
</Field>

<Callout type="info">
  See the [Col](/code/col) component for controlling how children span across grid columns.
</Callout>

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