GridItem

GridItem is the placement wrapper for one child inside a Grid.

It tells the grid where that child starts and, optionally, how many tracks it spans. Use it when the layout has named or explicit rows and columns and placement matters.

Use GridItem together with Grid. Do not use it for simple wrapping galleries or equal-width card layouts. Those are often better handled by SimpleGrid or Wrap.

Example

use fission::prelude::*;
let card = GridItem::new(Text::new("Revenue").into())
    .cell(1, 1)
    .span(1, 2)
    .into();

This places the item at row 1, column 1, and spans two columns.

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
child	Widget	The content placed inside the grid.	Required.
row_start	GridPlacement	Starting row placement.	Defaults to GridPlacement::Auto.
row_end	GridPlacement	Ending row placement or row span.	Defaults to GridPlacement::Auto.
col_start	GridPlacement	Starting column placement.	Defaults to GridPlacement::Auto.
col_end	GridPlacement	Ending column placement or column span.	Defaults to GridPlacement::Auto.

Placement behavior

The convenience helpers are the easiest way to use this type.

cell(row, col) sets the starting row and column using 1-indexed grid lines.

span(row_span, col_span) sets the ending placement as a span value.

If you omit placement, the grid can auto-place the item. That is convenient for simple cases, but explicit placement is usually clearer when you chose Grid in the first place.

Specific advice

Reach for GridItem when placement is part of the design, not just part of implementation detail. If you find yourself assigning every item a row and column only to simulate a simple responsive gallery, the layout probably wants SimpleGrid instead.

Production checklist

For GridItem, review the fields that change behavior before treating the widget as finished: id, child, row_start, row_end, col_start, col_end. 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.

•

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

•

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 GridItem 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, SimpleGrid, and Wrap.