---
title: Column
description: Vertical flex container for stacking children top-to-bottom.
icon: table-columns
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

Column arranges children vertically. Use `gap` to control spacing between items.

## Basic Usage

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQ29sdW1uLAogICAgRGl2LAopCgp3aXRoIENvbHVtbihnYXA9NCk6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCIpCg">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Column,
    Div,
)

with Column(gap=4):
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Gap

<Tabs>
<Tab title="gap=4">
<ComponentPreview json={{"view":{"cssClass":"gap-4 p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD00LCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCIpCg">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=4, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title="gap=8">
<ComponentPreview json={{"view":{"cssClass":"gap-8 p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD04LCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCIpCg">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=8, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-8 p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title="gap=12">
<ComponentPreview json={{"view":{"cssClass":"gap-12 p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD0xMiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAiKQo">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=12, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
    Div(css_class="bg-emerald-500 rounded-md h-10")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-12 p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
</Tabs>

## Alignment

In a Column, `align` controls horizontal alignment. The difference is visible when children have different widths.

<Tabs>
<Tab title='align="start"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-start p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-full","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-3/4","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-1/2","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD00LCBhbGlnbj0ic3RhcnQiLCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy1mdWxsIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCB3LTMvNCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0xLzIiKQo">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=4, align="start", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-full")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-3/4")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-1/2")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-start p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-full", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-3/4", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-1/2", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='align="center"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-center p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-full","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-3/4","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-1/2","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD00LCBhbGlnbj0iY2VudGVyIiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctZnVsbCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0zLzQiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMS8yIikK">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=4, align="center", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-full")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-3/4")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-1/2")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-center p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-full", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-3/4", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-1/2", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='align="end"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-end p-3 border-3 border-dashed","type":"Column","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-full","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-3/4","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-1/2","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBEaXYKCndpdGggQ29sdW1uKGdhcD00LCBhbGlnbj0iZW5kIiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctZnVsbCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0zLzQiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMS8yIikK">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Column, Div

with Column(gap=4, align="end", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-full")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-3/4")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-1/2")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-end p-3 border-3 border-dashed",
    "type": "Column",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-full", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-3/4", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-1/2", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
</Tabs>

## API Reference

<Card icon="code" title="Column Parameters">
<ParamField body="gap" type="int | tuple | Responsive | None" default="None">
  Gap between children. An int maps to `gap-{n}`. A tuple `(x, y)` sets per-axis gaps; use `None` to skip an axis. A `Responsive()` sets different gaps at different breakpoints.
</ParamField>

<ParamField body="align" type="str | None" default="None">
  Cross-axis alignment: `"start"`, `"center"`, `"end"`, `"stretch"`, `"baseline"`.
</ParamField>

<ParamField body="justify" type="str | None" default="None">
  Main-axis distribution: `"start"`, `"center"`, `"end"`, `"between"`, `"around"`, `"evenly"`, `"stretch"`.
</ParamField>

<ParamField body="css_class" type="str | Responsive | None" default="None">
  Additional Tailwind CSS classes. A `Responsive()` compiles breakpoint-prefixed classes.
</ParamField>
</Card>

## Protocol Reference

```json Column
{
  "type": "Column",
  "children?": "[Component]",
  "let?": "object",
  "gap?": "number | Action[]",
  "align?": "start | center | end | stretch | baseline",
  "justify?": "start | center | end | between | around | evenly | stretch",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Column](/protocol/column).
