> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Columns

Arrange content in multi-column layouts.

Use the `Columns` component to create responsive grid layouts. Columns stack on small screens and expand on larger viewports.

## Two-column layout

The default `cols` value is `2`:

```mdx
<Columns>
  <Card title="Write in MDX">
    Use standard Markdown with built-in components.
  </Card>
  <Card title="Deploy instantly">
    Push your changes and go live in seconds.
  </Card>
</Columns>
```

  ### Write in MDX

Use standard Markdown with built-in components.
  ### Deploy instantly

Push your changes and go live in seconds.

## Three-column layout

Set `cols={3}` for a three-column grid:

```mdx
<Columns cols={3}>
  <Card title="CLI" href="/cli/overview">
    Build and deploy from your terminal.
  </Card>
  <Card title="Components" href="/components/callout">
    Rich UI elements for your content.
  </Card>
  <Card title="Search" href="/features/search">
    Full-text search out of the box.
  </Card>
</Columns>
```

  ### [CLI](/cli/overview)

Build and deploy from your terminal.
  ### [Components](/components/callout)

Rich UI elements for your content.
  ### [Search](/features/search)

Full-text search out of the box.

## With Column wrapper

Use the `Column` component when you need to place non-card content in the grid:

```mdx
<Columns cols={2}>
  <Column>
    ### Left side

    You can put any Markdown or components in a column.

  </Column>
  <Column>
    ### Right side

    Columns are useful for side-by-side comparisons.

  </Column>
</Columns>
```

    ### Left side

    You can put any Markdown or components in a column.

    ### Right side

    Columns are useful for side-by-side comparisons.

## Props

### Columns

- `cols` (type: 1 | 2 | 3 | 4, required: false, default: 2): Number of columns in the grid.
- `children` (type: ReactNode, required: true): Grid content (cards, Column components, or other elements).

### Column

`Column` accepts `children` and renders them inside a single grid cell.