Grid - Develop

The CSS grid layout module is a powerful tool for creating complex and responsive layouts in web design. It allows you to divide a page into major regions or define relationships between parts of a control built from HTML primitives. Unlike traditional tables, grid layout provides more flexibility and enables authors to align elements into columns and rows with ease.

The Cherry Grid system simplifies creating responsive layouts using the modern CSS grid property. The component serves as the main container for creating grids. It allows you to define the grid structure, including the number of columns and the gaps. Let’s dive into the details of how to use Cherry’s grid components.

<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

Explore the source code on GitHub: