---
title: Columns
description: A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure.
group: Layout
storybookPath: /story/layout-columns--basic
---

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.

```jsx live
<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.

```jsx live
<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.

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