Columns

Arrange cards and other components in a responsive multi-column grid layout with the columns component, including customizable column counts.

The Columns component lets you arrange content in a responsive grid layout. It’s most often used to put cards in a grid, by specifying the number of grid columns. You can also use the Column sub-component to wrap arbitrary content. Columns are responsive and automatically adjust for smaller screens.

Get started

Set up your project with our quickstart guide.

API reference

Explore endpoints, parameters, and examples for your API.

Columns example

<Columns cols={2}>
  <Card title="Get started">
    Set up your project with our quickstart guide.
  </Card>
  <Card title="API reference">
    Explore endpoints, parameters, and examples for your API.
  </Card>
</Columns>

Column sub-component

Use the Column component to wrap text or code in individual columns. This is useful when you want to display arbitrary content side by side, not just cards or other components.

Installation

npm install my-package

Usage

import { init } from 'my-package';
init();

Column sub-component example

<Columns cols={2}>
  <Column>

  **Installation**

  ```bash
  npm install my-package
  ```

  </Column>
  <Column>

  **Usage**

  ```javascript
  import { init } from 'my-package';
  init();
  ```

  </Column>
</Columns>

Properties

cols · number · default: 2

The number of columns per row. Accepts values from 1 to 4.