SimpleGrid

SimpleGrid is the lightweight responsive grid helper.

Instead of making you define explicit tracks like Grid, it wraps children and gives each child a minimum width. That makes it a good fit for galleries, settings cards, attachment previews, or dashboard tiles that should flow naturally as the viewport changes.

Use SimpleGrid when the goal is responsive card wrapping. Do not use it when you need named rows and columns or explicit placement rules. That is what Grid and GridItem are for.

Example

use fission::prelude::*;

let widget: Widget = SimpleGrid {
    min_child_width: 220.0,
    gap: Some(16.0),
    children: vec![
        Text::new("Card A").into(),
        Text::new("Card B").into(),
        Text::new("Card C").into(),
    ],
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
min_child_width	f32	Minimum width each child should try to keep.	Required. Each child is wrapped in a container with this minimum width.
gap	Option<f32>	Spacing between children.	Defaults to None.
children	Vec<Widget>	Items to place in the wrapping grid.	Defaults to an empty list.

Layout behavior

SimpleGrid is implemented as a wrapping Row. Each child is wrapped in a Container with flex_grow: 1.0 and min_width(min_child_width). That is why it feels grid-like without requiring explicit track definitions.

This also means SimpleGrid is intentionally opinionated and approximate. It is about responsive card flow, not strict spreadsheet-style layout.

Specific advice

SimpleGrid works especially well when child cards already know how to size themselves vertically. If you also want the media inside those cards to keep consistent proportions, combine it with AspectRatio.

When exact placement matters more than natural wrapping, stop using SimpleGrid and switch to Grid.

Production checklist

For SimpleGrid, review the fields that change behavior before treating the widget as finished: min_child_width, gap, children. 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.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

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 SimpleGrid 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.

Grid, Wrap, Container, and AspectRatio.