Grid

A grid uses the CSS grid API to create consistent layouts.

Examples Code Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`alignContent`
Description	Used to align the grid along the block axis.
Type	`"center" \| "end" \| "start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`

`alignItems`
Description	Used to align children along the block axis.
Type	`"center" \| "baseline" \| "end" \| "start" \| "stretch"`

`as`
Description	The DOM element to render as the Flex. Defaults to `div`.
Type	`"div" \| "ol" \| "span" \| "ul"`

`autoFlow`
Description	Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
Type	`"row" \| "column" \| "dense" \| "row dense" \| "column dense"`

`children`
Required
Description	Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`columnGap`
Description	Represents the space between each column.
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200" \| "space.0" \| "space.075" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`gap`
Description	Represents the space between each child across both axes.
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200" \| "space.0" \| "space.075" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`id`
Description	HTML id attrubute.
Type	`string`

`justifyContent`
Description	Used to align children along the inline axis.
Type	`"center" \| "end" \| "start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`

`justifyItems`
Deprecated
Description	Used to align the grid along the inline axis. This prop is not hooked up and doesn't nothing!
Type	`"center" \| "end" \| "start" \| "stretch"`

`ref`
Description	No description.
Type	`((instance: any) => void) \| RefObject<any>`

`role`
Description	Accessible role.
Type	`string`

`rowGap`
Description	Represents the space between each row.
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200" \| "space.0" \| "space.075" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "borderColor" \| "grid" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "translate" \| "content" \| "color" \| "top" \| "bottom" \| "right" \| "left" \| "height" \| ... 486 more ... \| "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.