Columns

Columns allows you to create a responsive layout grid.

import { ... } from '@ag.ds-next/react/columns';

This package includes the components <Columns /> and <Column />.

Columns

The Columns component creates a 12 column grid by default. You can use the cols prop to specify how many columns are needed. As a general rule, we prefer layouts to have 1 column for mobile and 2 columns for tablet viewports.

Open in Playroom, opens in a new tab Open responsive preview

/* highContrastOutline outline added for demo purposes only */
<Columns gap={1.5} cols={{ xs: 1, sm: 2, md: 3 }}>
	<Box background="shadeAlt" highContrastOutline padding={1} />
	<Box background="shadeAlt" highContrastOutline padding={1} />
	<Box background="shadeAlt" highContrastOutline padding={1} />
	<Box background="shadeAlt" highContrastOutline padding={1} />
	<Box background="shadeAlt" highContrastOutline padding={1} />
</Columns>

The gap prop effects both the row and column gap. To set a different gap for rows and column, you can use the columnGap and rowGap props.

Column

You can use Column to make an item span multiple columns.

Open in Playroom, opens in a new tab Open responsive preview

/* highContrastOutline outline added for demo purposes only */
<Columns gap={1.5} cols={{ xs: 1, md: 3 }}>
	<Box background="shadeAlt" highContrastOutline padding={1} />
	<Column columnSpan={{ xs: 1, md: 2 }}>
		<Box background="shadeAlt" highContrastOutline padding={1} />
	</Column>
</Columns>

Column start and end

The columnStart and columnEnd props can be used to determine the Column’s start and end location within the row.

Open in Playroom, opens in a new tab Open responsive preview

/* highContrastOutline outline added for demo purposes only */
<Columns>
	<Column columnStart={3} columnEnd={9}>
		<Box background="shadeAlt" highContrastOutline padding={1} />
	</Column>
</Columns>

Edit this page