Grid

CSS grid layout for two-dimensional arrangements with a fixed column count.

This is Orbital's fixed-column CSS grid for predictable column layouts. Compose with GridItem children to control span and offset per cell. For fluid card tiles that reflow with viewport width, use AutoGrid in the orbital crate.

  • Dashboard tiles, form columns, responsive card grids - When both row and column alignment matter
  • Set config.cols to the number of grid columns.
  • Wrap each cell in GridItem.
  • Use GridItemConfig::span to span multiple columns; offset to skip columns.
  • Tune config.x_gap / config.y_gap for consistent spacing rhythm.
Three-column grid

Three equal columns with consistent gaps—typical for dashboard tiles, metric cards, or icon grids.

One
Two
Three
Two columns with gap

Two-column layout with separate horizontal and vertical gaps for form pairs, settings rows, or side-by-side cards.

A
B
Spanning item via GridItem

column=2 spans multiple grid columns so one cell can be wide while neighbors stay single-column.

Wide (span 2)
N
Full width (span 3)
Offset via GridItem

offset=1 leaves an empty column at the start—useful for indented rows or staggered cards.

Offset 1, span 2
Theme token

Cells use theme background tokens so grid layouts inherit light/dark surfaces from the provider.

Themed cell
Themed cell
Form columns with Field

Pair Grid with native Field for two-column settings or registration forms.

Single column

Explicit single-column stack when cols=1 — useful for narrow panels or mobile-first layouts.

Row 1
Row 2