Column

Fission

Product

▾

Setup

›

›

Column is the main vertical layout primitive in Fission.

It places children top to bottom, with optional gap, flex behavior, wrapping, and accessibility semantics. If you are building screens, forms, cards, settings pages, or content stacks, you will use Column constantly.

Use Column when order flows vertically and children belong in the normal layout stream. Do not use it for layered overlays, absolute positioning, or huge virtualized lists; those are better handled by ZStack, Positioned, or LazyColumn.

Example

use fission::prelude::*;
use fission::op::AlignItems;

let widget: Widget = Column {
    gap: Some(12.0),
    align_items: AlignItems::Stretch,
    children: vec![
        Text::new("Profile").into(),
        Text::new("Email settings").into(),
        Text::new("Security").into(),
    ],
    ..Default::default()
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
children	Vec<Widget>	Child widgets laid out from top to bottom.	Defaults to an empty list.
semantics	Option<Semantics>	Optional accessibility semantics wrapper.	When present, the lowered column is wrapped in a semantics node.
flex_grow	f32	How much extra space the column absorbs from its parent.	Defaults to 0.0.
flex_shrink	f32	How much the column is allowed to shrink when space is tight.	Defaults to 1.0.
gap	Option<f32>	Vertical spacing between children.	Defaults to None.
wrap	FlexWrap	Whether children wrap when they overflow.	Defaults to FlexWrap::NoWrap. Most columns do not wrap.
align_items	AlignItems	Cross-axis alignment, which is horizontal in a column.	Defaults to AlignItems::Stretch.
justify_content	JustifyContent	Main-axis distribution, which is vertical in a column.	Defaults to JustifyContent::Start.

Layout behavior

Column lowers to a vertical flex layout. That means justify_content controls vertical distribution and align_items controls horizontal placement of each child. Beginners often mix those up because the meaning changes with the layout direction.

Column is also a good root for responsive screen sections because it makes spacing and reading order explicit. When a screen becomes scrollable, the common pattern is a Scroll containing a Column.

Specific advice

Prefer gap over sprinkling fixed Spacer widgets between every child. A spacer is still useful when one child should absorb leftover space, but gap usually reads better for ordinary stacked content.

If you only need a simpler convenience wrapper with children and spacing, use VStack.

Production checklist

For Column, review the fields that change behavior before treating the widget as finished: id, children, semantics, flex_grow, flex_shrink, gap. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Use semantics when visible content alone is not enough for assistive technology, especially for icon-only controls or custom surfaces.

•

Prefer parent layout and design-system sizing first; use explicit size or spacing fields when the product layout requires that constraint on this widget specifically.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Column setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Row, VStack, Scroll, and Wrap.