Grid

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

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)

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, Inline or Stack.

import React from 'react';

import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

export default function Basic(): React.JSX.Element {
	return (
		<Grid gap="space.200" alignItems="center">
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
		</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.

import React from 'react';

import { cssMap } from '@atlaskit/css';
import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

const gridStyles = cssMap({
	root: {
		gridTemplateColumns: '1fr 1fr',
	},
});

export default function Basic(): React.JSX.Element {
	return (
		<Grid gap="space.200" alignItems="center">
			<Grid testId="grid-basic" gap="space.100" xcss={gridStyles.root}>
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
			</Grid>
			<Grid testId="grid-basic" gap="space.200" xcss={gridStyles.root}>
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
			</Grid>
			<Grid testId="grid-basic" gap="space.400" xcss={gridStyles.root}>
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
			</Grid>
		</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.

import React from 'react';

import { cssMap } from '@atlaskit/css';
import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

const gridStyles = cssMap({
	root: {
		gridTemplateColumns: '1fr 100px 1fr',
	},
});

export default function Basic(): React.JSX.Element {
	return (
		<Grid testId="grid-basic" rowGap="space.200" columnGap="space.400" xcss={gridStyles.root}>
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
		</Grid>
	);
}

Template rows

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

import React from 'react';

import { cssMap } from '@atlaskit/css';
import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

const gridStyles = cssMap({
	root: {
		gridTemplateRows: '3rem 2rem',
	},
});

export default function Basic(): React.JSX.Element {
	return (
		<Grid testId="grid-basic" rowGap="space.200" columnGap="space.400" xcss={gridStyles.root}>
			<ExampleBox />
			<ExampleBox />
		</Grid>
	);
}

Template areas

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

import React from 'react';

import { cssMap } from '@atlaskit/css';
import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

const gridStyles = cssMap({
	root: {
		gridTemplateAreas: `
            "navigation navigation navigation"
            "sidenav content content"
            "footer footer footer"
        `,
	},
	navigation: { gridArea: 'navigation' },
	sidenav: { gridArea: 'sidenav' },
	content: { gridArea: 'content' },
	footer: { gridArea: 'footer' },
});

export default function Basic(): React.JSX.Element {
	return (
		<Grid testId="grid-basic" gap="space.200" xcss={gridStyles.root}>
			<ExampleBox xcss={gridStyles.navigation} />
			<ExampleBox xcss={gridStyles.sidenav} />
			<ExampleBox xcss={gridStyles.content} />
			<ExampleBox xcss={gridStyles.footer} />
		</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.

import React from 'react';

import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

export default function Basic(): React.JSX.Element {
	return (
		<Grid autoFlow="column" gap="space.200">
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
		</Grid>
	);
}

Responsive grid

Here, we construct a grid layout that adapts from a single column to a four-column layout depending on the viewport size.

import type { JSX } from 'react';

import { cssMap, jsx } from '@atlaskit/css';
import { Grid } from '@atlaskit/primitives/compiled/grid';

import ExampleBox from '../shared/example-box';

const styles = cssMap({
	responsive: {
		gridTemplateColumns: 'repeat(1, 1fr)',
		'@media (min-width: 30rem)': {
			gridTemplateColumns: 'repeat(2, 1fr)',
		},
		'@media (min-width: 48rem)': {
			gridTemplateColumns: 'repeat(3, 1fr)',
		},
		'@media (min-width: 90rem)': {
			gridTemplateColumns: 'repeat(4, 1fr)',
		},
	},
});

const ResponsiveGrid = (): JSX.Element => {
	return (
		<Grid xcss={styles.responsive} gap="space.200" alignItems="center">
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
		</Grid>
	);
};

export default ResponsiveGrid;

You may also be looking for:

legacy page grid

Was this page helpful?

We use this feedback to improve our documentation.