Photonix UI - React Components, Templates & Figma Design System

Grid

CSS Grid layout component.

Preview

Usage

import { Grid, Box } from '@photonix/ultimate';

<Grid columns={3} gap="md">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Grid>

Component API

Grid

Prop	Type	Default	Description
columns	`ResponsiveValue<number>`	`-`	Number of columns or responsive column config
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between grid items
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row gap (overrides gap for rows)
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column gap (overrides gap for columns)
templateColumns	`ResponsiveValue<string>`	`-`	Template columns (CSS grid-template-columns value)
templateRows	`ResponsiveValue<string>`	`-`	Template rows (CSS grid-template-rows value)
templateAreas	`ResponsiveValue<string>`	`-`	Template areas (CSS grid-template-areas value)
autoRows	`ResponsiveValue<string>`	`-`	Auto rows sizing
autoColumns	`ResponsiveValue<string>`	`-`	Auto columns sizing
autoFlow	`ResponsiveValue<"row" \| "column" \| "dense" \| "row dense" \| "column dense">`	`-`	Auto flow direction
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
order	`ResponsiveValue<number>`	`-`	Order
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<string>`	`-`	Align content (multiline)
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align self
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
color	`ResponsiveValue<string>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`

GridItem

Prop	Type	Default	Description
colSpan	`ResponsiveValue<number \| "full">`	`-`	Number of columns to span
rowSpan	`ResponsiveValue<number>`	`-`	Number of rows to span
colStart	`ResponsiveValue<number>`	`-`	Column start position
colEnd	`ResponsiveValue<number>`	`-`	Column end position
rowStart	`ResponsiveValue<number>`	`-`	Row start position
rowEnd	`ResponsiveValue<number>`	`-`	Row end position
area	`ResponsiveValue<string>`	`-`	Grid area name
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
order	`ResponsiveValue<number>`	`-`	Order
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between items
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column gap
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row gap
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<string>`	`-`	Align content (multiline)
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align self
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
color	`ResponsiveValue<string>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`

SimpleGrid

Prop	Type	Default	Description
columns	`ResponsiveValue<number>`	`-`	Number of columns (simpler API)
minChildWidth	`ResponsiveValue<string \| number>`	`-`	Minimum child width for auto-fit
color	`ResponsiveValue<string>`	`-`
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
order	`ResponsiveValue<number>`	`-`	Order
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between grid items
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column gap (overrides gap for columns)
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row gap (overrides gap for rows)
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<string>`	`-`	Align content (multiline)
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align self
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`
templateColumns	`ResponsiveValue<string>`	`-`	Template columns (CSS grid-template-columns value)
templateRows	`ResponsiveValue<string>`	`-`	Template rows (CSS grid-template-rows value)
templateAreas	`ResponsiveValue<string>`	`-`	Template areas (CSS grid-template-areas value)
autoRows	`ResponsiveValue<string>`	`-`	Auto rows sizing
autoColumns	`ResponsiveValue<string>`	`-`	Auto columns sizing
autoFlow	`ResponsiveValue<"row" \| "column" \| "dense" \| "row dense" \| "column dense">`	`-`	Auto flow direction

Variants

Columns

Specify the number of columns.

Col 1

Col 2

Columns

<Grid columns={2}>...</Grid>
<Grid columns="1fr 2fr">...</Grid>

Gap

Control horizontal and vertical spacing.

Gap

<Grid columns={2} gap="xl">...</Grid>

Spanning Columns

Use GridItem to span multiple columns or rows.

Span 2

Spanning Columns

<Grid columns={3} gap="md">
  <GridItem colSpan={2}>Span 2</GridItem>
  <Box>1</Box>
  <Box>1</Box>
  <GridItem colSpan={2}>Span 2</GridItem>
</Grid>

Responsive Columns

Adjust number of columns for different breakpoints.

Responsive Columns

<Grid columns={{ base: 1, sm: 2, md: 3 }} gap="md">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Grid>

Grid

Preview

Component API

Grid

GridItem

SimpleGrid

Variants

Columns

Gap

Spanning Columns

Responsive Columns

On this page