Grid

Used to manage grid layouts.

Panda

import { Grid } from "styled-system/jsx"

Usage

Easily create grid layouts with the Grid component.

Col Span

Pass colSpan prop to GridItem to span across columns.

Spanning Columns

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution

Props

Prop	Type	Description
gridTemplateColumns	`SystemStyleObject['gridTemplateColumns']`	Defines the columns of the grid.
gridTemplateRows	`SystemStyleObject['gridTemplateRows']`	Defines the rows of the grid.
gap	`SystemStyleObject['gap']`	Defines the gap between grid items.
colSpan	`number`	Number of columns the grid item should span.
rowSpan	`number`	Number of rows the grid item should span.
columns	`number`	Number of columns in the grid.

On this page

Edit this page on Github

Cerberus Design System | Docs

import { DecorativeBox } from '@/app/components/decorative-box'
import { Grid } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Grid gridTemplateColumns="repeat(3, 1fr)" gap="md" w="3/4">
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
    </Grid>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Grid, GridItem } from 'styled-system/jsx'

export function ColSpanDemo() {
  return (
    <Grid gridTemplateColumns="repeat(4, 1fr)" gap="md" w="3/4">
      <GridItem colSpan={2}>
        <DecorativeBox h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <DecorativeBox h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <DecorativeBox h="20" />
      </GridItem>
    </Grid>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Grid, GridItem } from 'styled-system/jsx'

export function SpanningDemo() {
  return (
    <Grid
      h="200px"
      gridTemplateRows="repeat(2, 1fr)"
      gridTemplateColumns="repeat(5, 1fr)"
      gap="md"
      w="3/4"
    >
      <GridItem rowSpan={2} colSpan={1}>
        <DecorativeBox>rowSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={2}>
        <DecorativeBox>colSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={2}>
        <DecorativeBox>colSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={4}>
        <DecorativeBox>colSpan=4</DecorativeBox>
      </GridItem>
    </Grid>
  )
}