GridItem

GridItem is a component that is used to define the placement of a child element within a Grid.

All docs for GridItem will use a Grid component as a parent. This is to ensure that the GridItem is rendered correctly.

Basic Usage


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem fullHeight fullWidth gridColumn="span 3" gridRow="span 3">
        <Card theme="secondary500" borderless padding="large">
            1
        </Card>
    </GridItem>
</Grid>

Properties

gridArea


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem gridArea={{ base: '1 / 2 / 4 / 3', lg: '1 / 4 / 4 / 2' }}>
        ...
    </GridItem>
</Grid>

gridColumnStart / gridColumnEnd


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem gridColumnEnd={3} gridColumnStart={1}>
        ...
    </GridItem>
</Grid>

gridColumn


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem gridColumn="span 1">...</GridItem>
</Grid>

gridRowStart / gridRowEnd


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem gridRowEnd={3} gridRowStart={1}>
        ...
    </GridItem>
</Grid>

gridRow


<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 100px)">
    <GridItem gridRow="span 3">...</GridItem>
</Grid>

Responsiveness


<Grid gridTemplateColumns="repeat(12, 1fr)" gap="md">
    <GridItem gridColumn={{ base: 'span 12', lg: 'span 6' }}>...</GridItem>
    <GridItem gridColumn={{ base: 'span 12', lg: 'span 6' }}>...</GridItem>
</Grid>

Full API

Name	Type	Default
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`gridColumn`	ResponsiveVariant<`span ${string}` \| `span ${number}` \| "auto" \| `${number} / span ${string}` \| `${number} / span ${number}`> The column number the grid item should span.
`gridColumnStart`	`ResponsiveVariant<number \| "auto">` The column number the grid item should start at.
`gridColumnEnd`	`ResponsiveVariant<number \| "auto">` The column number the grid item should end at.
`gridRow`	ResponsiveVariant<`span ${string}` \| `span ${number}` \| "auto" \| `${number} / span ${string}` \| `${number} / span ${number}`> The row number the grid item should span.
`gridRowStart`	`ResponsiveVariant<number \| "auto">` The row number the grid item should start at.
`gridRowEnd`	`ResponsiveVariant<number \| "auto">` The row number the grid item should end at.
`gridArea`	`ResponsiveVariant<string>` Shorthand for CSS `grid-area` https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area#syntax
`alignSelf`	ConditionalValue<WithEscapeHatch<OnlyKnown<"alignSelf", `var(--${string})` \| AlignSelf \| readonly string[] \| undefined>>> \| undefined The `align-self` CSS property overrides a grid or flex item’s `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. Syntax: `auto \| normal \| stretch \| <baseline-position> \| <overflow-position>? <self-position>`
`justifySelf`	`ConditionalValue<AnyString \| readonly string[] \| JustifySelf \| undefined>` The CSS `justify-self` property sets the way a box is justified inside its alignment container along the appropriate axis. Syntax: `auto \| normal \| stretch \| <baseline-position> \| <overflow-position>? [ <self-position> \| left \| right ]`