Column

<Column> is a direct child of <Row>. It hosts the content components.

Props

Prop	Type	Default
padding	string	"0px"
backgroundColor	string	""
borderRadius	string	"0px"

A quick note on padding behavior, since it trips people up: the column itself defaults to "0px". Each content component inside the column is wrapped in its own container, with its own default padding ("10px"). That wrapping is what creates the breathing room you see between items. Set padding on the column when you want to push all items inward together; set it on individual items (or on the <Row>) for finer control.

The <Column> count must match the chosen layout. TwoEqual wants two columns, ThreeEqual wants three, mismatch throws via validateColumnLayout. See Limitations.

Example

<Column padding="20px" backgroundColor="#fafafa" borderRadius="8px">
  <Paragraph>Inside a column</Paragraph>
</Column>

See Also

• Row — the parent container for columns.
• ColumnLayouts — available layout presets.
• Content Components — what goes inside a column.