Grid

Layout component that can be used to create a responsive grid for your content.

Import

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

Display

<Grid display="grid" columns={12} gap={4}>
      <Grid.Item columns={{ xs: '1 / 4', lg: '7 / -1' }}>
          {children}
      </Grid.Item>
</Grid>

Allied components

Prop	Type	Default
`display`	`union`	No default value
`gap`	`union`	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
`columns`	`union`	No default value
`rows`	`union`	No default value
`gridTemplate`	`string`	No default value
`gridTemplateAreas`	`string`	No default value
`columnGap`	`union`	No default value
`rowGap`	`union`	No default value
`justifyItems`	`union`	No default value
`alignItems`	`union`	No default value
`justifyContent`	`union`	No default value
`alignContent`	`union`	No default value
`padding`	`number`	No default value
`paddingInline`	`number`	No default value
`paddingBlock`	`number`	No default value
`paddingTop`	`number`	No default value
`paddingBottom`	`number`	No default value
`paddingStart`	`number`	No default value
`paddingEnd`	`number`	No default value
`margin`	`number \| auto`	No default value
`marginInline`	`union`	No default value
`marginBlock`	`union`	No default value
`marginTop`	`union`	No default value
`marginBottom`	`union`	No default value
`marginStart`	`union`	No default value
`marginEnd`	`union`	No default value
`borderColor`	`union`	No default value
`as`	`keyof React.JSX.IntrinsicElements`	`div`
`className`	`union`	No default value
`attributes`	`object`	No default value
`children`	`React.ReactNode`	No default value

Prop	Type	Default
`as`	`keyof React.JSX.IntrinsicElements`	`div`
`attributes`	`object`	No default value
`className`	`union`	No default value
`columnStart`	`union`	No default value
`columnEnd`	`union`	No default value
`columns`	`string`	No default value
`rowStart`	`union`	No default value
`rowEnd`	`union`	No default value
`rows`	`string`	No default value
`gridArea`	`string`	No default value
`justifySelf`	`union`	No default value
`alignSelf`	`union`	No default value
`padding`	`number`	No default value
`paddingInline`	`number`	No default value
`paddingBlock`	`number`	No default value
`paddingTop`	`number`	No default value
`paddingBottom`	`number`	No default value
`paddingStart`	`number`	No default value
`paddingEnd`	`number`	No default value
`margin`	`union`	No default value
`marginInline`	`union`	No default value
`marginBlock`	`union`	No default value
`marginTop`	`union`	No default value
`marginBottom`	`union`	No default value
`marginStart`	`union`	No default value
`marginEnd`	`union`	No default value
`borderColor`	`union`	No default value