Skip to main content

Grid

Grid is a layout element that places content in rows and columns, such as a card gallery or a page with a sidebar.

Import

import { Grid } from '@vortexlabs/vortex';
import type { GridProps } from '@vortexlabs/vortex';

Allied components

Other links

Grid

Grid props
PropTypeDefaultAttributes
display
union
No default value
as
union
div
className
union
No default value
children
React.ReactNode
No default value
attributes
object
No default value
backgroundColor
union
No default value
borderColor
union
No default value
borderTop
union
No default value
borderBottom
union
No default value
borderStart
union
No default value
borderEnd
union
No default value
borderInline
union
No default value
borderBlock
union
No default value
borderRadius
union
No default value
padding
number
No default value
paddingTop
number
No default value
paddingBottom
number
No default value
paddingStart
number
No default value
paddingEnd
number
No default value
paddingInline
number
No default value
paddingBlock
number
No default value
margin
number
No default value
marginTop
number
No default value
marginBottom
number
No default value
marginStart
number
No default value
marginEnd
number
No default value
marginInline
number
No default value
marginBlock
number
No default value
gap
number
No default value
height
union
No default value
width
union
No default value
minHeight
union
No default value
minWidth
union
No default value
maxHeight
union
No default value
maxWidth
union
No default value
columnGap
number
No default value
rowGap
number
No default value
columns
union
No default value
rows
union
No default value
gridTemplateAreas
string
No default value
gridTemplate
string
No default value
autoFlow
union
No default value
autoRows
union
No default value
autoColumns
union
No default value
justifyItems
union
No default value
alignItems
union
No default value
justifyContent
union
No default value
alignContent
union
No default value

Grid.Item

Grid.Item props
PropTypeDefaultAttributes
as
union
div
attributes
object
No default value
columnStart
union
No default value
columnEnd
union
No default value
rowStart
union
No default value
rowEnd
union
No default value
columns
string
No default value
rows
string
No default value
gridArea
string
No default value
justifySelf
union
No default value
alignSelf
union
No default value
className
union
No default value
children
React.ReactNode
No default value
padding
number
No default value
paddingTop
number
No default value
paddingBottom
number
No default value
paddingStart
number
No default value
paddingEnd
number
No default value
paddingInline
number
No default value
paddingBlock
number
No default value
margin
number
No default value
marginTop
number
No default value
marginBottom
number
No default value
marginStart
number
No default value
marginEnd
number
No default value
marginInline
number
No default value
marginBlock
number
No default value
backgroundColor
union
No default value
borderColor
union
No default value
borderRadius
union
No default value
borderTop
union
No default value
borderBottom
union
No default value
borderStart
union
No default value
borderEnd
union
No default value
borderInline
union
No default value
borderBlock
union
No default value