@atlaskit/primitives/constellation/grid/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Grid
description: A grid uses the CSS grid API to create consistent layouts.
order: 0
---

import GridBasic from '../../examples/constellation/grid/basic';
import GridGap from '../../examples/constellation/grid/gap';
import GridTemplate from '../../examples/constellation/grid/template';
import GridTemplateArea from '../../examples/constellation/grid/template-area';
import GridTemplateRow from '../../examples/constellation/grid/template-row';
import GridAutoFlow from '../../examples/constellation/grid/auto-flow';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
  name="@atlaskit/primitives"
  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
  directoryName="primitives"
/>

## Basic

The `Grid` component is designed as a very basic mapping to the CSS Grid API.
It can be used as an alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or [Stack](/components/primitives/stack).

<Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />

## Gap properties

Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics and keep the whitespace of the grid harmonious with the spacing system.

<Example Component={GridGap} packageName="@atlaskit/primitives/grid" />

## Template syntax

Grid-prefixed template properties in CSS do not have this prefix in the component API.
For example `grid-template-*` are instead applied as `templateColumns`, `templateRows` and `templateArea` properties.

### Template columns

Template columns enables grid to declare the way columns are applied in the template.

<Example Component={GridTemplate} packageName="@atlaskit/primitives/grid" />

### Template rows

Template rows enables grid to declare the way row are applied in the template.

<Example Component={GridTemplateRow} packageName="@atlaskit/primitives/grid" />

### Template areas

Template areas enables grid to declare the grid areas are applied in the template.

<Example Component={GridTemplateArea} packageName="@atlaskit/primitives/grid" />

## Autoflow syntax

Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is instead applied via `autoFlow`.

<Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />

You may also be looking for:

- [responsive layout grid](/components/grid)
- [legacy page grid](/components/page/grid)