Columns

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.

<Columns gap={1.5} cols={{ xs: 1, sm: 2, md: 3 }}>
	<Box background="shadeAlt" padding={1} />
	<Box background="shadeAlt" padding={1} />
	<Box background="shadeAlt" padding={1} />
	<Box background="shadeAlt" padding={1} />
	<Box background="shadeAlt" 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.

<Columns gap={1.5} cols={{ xs: 1, md: 3 }}>
	<Box background="shadeAlt" padding={1} />
	<Column columnSpan={{ xs: 1, md: 2 }}>
		<Box background="shadeAlt" 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.

<Columns>
	<Column columnStart={3} columnEnd={9}>
		<Box background="shadeAlt" padding={1} />
	</Column>
</Columns>