Skip to main content
Row arranges children horizontally with flexbox. Use gap to control spacing between items.

​
Basic Usage

​
Gap

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

​
Alignment

align controls vertical alignment of children. The difference is visible when children have different heights.

​
Justification

justify controls how children are distributed along the horizontal axis.

​
API Reference

Row Parameters

​
gap
int | tuple | 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.
​
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 | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Row
{
  "type": "Row",
  "children?": "[Component]",
  "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 Row.