AI Assistant

Grid

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.

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

childrenReact.ReactNode

Grid content.

$gapnumber | "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.

$colsnumber

Number of columns. Defaults to 3. Also available as responsive variants: $xsCols, $smCols, $mdCols, $lgCols, $xlCols, $xxlCols, $xxxlCols.

See the Col component for controlling how children span across grid columns.

Flex PreviousColNext
DiscordFigma TemplateFigma PluginGitHub