# Columns
Use columns for short side-by-side explanations that are easier to compare than read sequentially.
Source: /docs/components/columns
Last modified: 2026-06-20
Columns arrange cards and other short content in a responsive grid. Use them for balanced, side-by-side material that is easier to compare than read sequentially. If one side becomes long, split the material into normal sections instead.

## Basic card grid


### [Get started](/docs/quickstart)


    Set up your first Plandalf checkout path with the quickstart guide.


### [API reference](/docs/api/reference)


    Explore endpoints, parameters, and examples for the Plandalf API.


```mdx title="columns-card-grid.mdx"


### [Get started](/docs/quickstart)


    Set up your first Plandalf checkout path with the quickstart guide.


### [API reference](/docs/api/reference)


    Explore endpoints, parameters, and examples for the Plandalf API.


```

## Column sub-component

Use `Column` when each side contains arbitrary MDX rather than a single card. This mirrors Mintlify's pattern for paired install and usage snippets.


    **Installation**

```bash title="terminal"
npm install @plandalf/browser
```


    **Usage**

```js title="checkout.js"
import { createPlandalf } from "@plandalf/browser";

const plandalf = createPlandalf({ site: "demo" });
```


````mdx title="column-sub-component.mdx"


  **Installation**

  ```bash
  npm install @plandalf/browser
  ```


  **Usage**

  ```js
  import { createPlandalf } from "@plandalf/browser";

  const plandalf = createPlandalf({ site: "demo" });
  ```


````

## Balanced comparison


> **Hosted checkout**
>

      Use a hosted or modal frame when Plandalf owns the checkout experience.


> **Embedded checkout**
>

      Use an embedded surface when checkout should sit inside your app layout.


```mdx title="columns-example.mdx"


> **Hosted checkout**
>

      Use a hosted or modal frame when Plandalf owns the checkout experience.


> **Embedded checkout**
>

      Use an embedded surface when checkout should sit inside your app layout.


```

## Three-column scan

Use three columns for short, parallel explanations. Keep each column similar in weight so the reader can compare them quickly.


    <strong>Offer</strong>

    The product, price, checkout path, and buying surface.


    <strong>Deadline</strong>

    The timer, coupon, expiry, redirect, or launch window.


    <strong>Handoff</strong>

    The webhook, integration, sequence, or fulfillment action after purchase.


```mdx title="three-columns.mdx"


    <strong>Offer</strong>

    The product, price, checkout path, and buying surface.


    <strong>Deadline</strong>

    The timer, coupon, expiry, redirect, or launch window.


    <strong>Handoff</strong>

    The webhook, integration, sequence, or fulfillment action after purchase.


```

## Spanning content

Use `span` when one column needs to carry a wider code sample or explanation beside shorter supporting content.


### Open checkout


```js title="present.js"
await plandalf.present("pro-plan");
```

```html title="button.html"
<button data-plandalf-present="pro-plan">Buy Pro</button>
```


> **Use a span for the heavy side**
>

      The wider column owns the complex artifact. The narrow column explains when to use it.


## Properties


- `cols` (number; default: 2):
  Number of columns per row. Accepts values from `1` to `4` and collapses responsively on smaller screens.


## Plandalf extensions


- `columns` (number):
  Alias for `cols` when imported snippets use a more explicit property name.


- `gap` (sm | md | lg; default: md):
  Gap between columns.


- `align` (start | center | stretch; default: stretch):
  Vertical alignment for the column grid.


- `span` (1 | 2 | 3 | 4; default: 1):
  Set on an individual `Column` to let it occupy more grid tracks on wider screens.


- `class | className` (string):
  Optional utility classes for local spacing or text changes.


## Authoring rules

- Use columns for short peer ideas, not long article sections.
- Keep each column self-contained. Do not rely on reading left-to-right for critical setup.
- Put cards or panels directly inside columns only when those surfaces are the content, not wrappers around more grids.
- If one column grows much longer than the others, split the content into normal headings.

## Related


  - [Panel](/docs/components/panel): Add supporting side notes.
  - [Cards](/docs/components/cards): Use for linked next steps.
  - [Tiles](/docs/components/tiles): Use for dense navigation.