Grid Props

Grid props enable CSS Grid layouts with theme-aware values. These props help create responsive grid layouts easily.

Available Props

Prop	CSS Property	Theme Key
gridGap	grid-gap	space
gridRowGap	grid-row-gap	space
gridColumnGap	grid-column-gap	space
gridColumn	grid-column	none
gridRow	grid-row	none
gridArea	grid-area	none
gridAutoFlow	grid-auto-flow	none
gridAutoRows	grid-auto-rows	none
gridAutoColumns	grid-auto-columns	none
gridTemplateRows	grid-template-rows	none
gridTemplateColumns	grid-template-columns	none
gridTemplateAreas	grid-template-areas	none

Theme Integration

Grid gaps reference the theme's space scale:

{
  space: {
    0: '0',
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
    // ...etc
  }
}

Usage

<Grid
  gridGap={4}                    // grid-gap: 1rem
  gridTemplateColumns="1fr 2fr"  // grid-template-columns: 1fr 2fr
  gridAutoRows="minmax(100px, auto)" // grid-auto-rows: minmax(100px, auto)
>
  <Box gridColumn="1 / 3">Spans two columns</Box>
  <Box>Regular grid item</Box>
</Grid>

Responsive Grid Example

<Grid
  gridTemplateColumns={{
    base: "1fr",          // Single column on mobile
    md: "repeat(2, 1fr)", // Two columns on medium screens
    lg: "repeat(3, 1fr)"  // Three columns on large screens
  }}
  gridGap={[2, 3, 4]}     // Responsive gap
>
  {/* Grid items */}
</Grid>