Skip to main content
Column arranges children vertically. Use gap to control spacing between items.

​
Basic Usage

​
Gap

Gap controls the vertical spacing between children. Larger values give more visual separation between stacked items.

​
Alignment

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

​
API Reference

Column Parameters

​
gap
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.
​
align
str | None
default:"None"
Cross-axis alignment: "start", "center", "end", "stretch", "baseline".
​
justify
str | None
default:"None"
Main-axis distribution: "start", "center", "end", "between", "around", "evenly", "stretch".
​
css_class
str | Responsive | None
default:"None"
Additional Tailwind CSS classes. A Responsive() compiles breakpoint-prefixed classes.

​
Protocol Reference

Column
{
  "type": "Column",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "gap?": "number | [number, number]",
  "align?": "start | center | end | stretch | baseline",
  "justify?": "start | center | end | between | around | evenly | stretch",
  "cssClass?": "string"
}
For the complete protocol schema, see Column.