Skip to content
Lattice

Layout

Layout components arrange their children. They are containers — pass children to ->schema([...]), and nest them freely. This page covers the three you reach for most; the disclosures (Section & Collapsible) and the corner-pinned Floating panel have their own pages.

Stack

Section titled “Stack”

Stack::make() lays children out in one direction with a consistent gap. It defaults to a vertical column; pass ->direction('row') to lay them out horizontally.

Stack::make()->direction('row')->gap(Gap::Small)->schema([
  Button::make('Save'),
  Button::make('Cancel')->emphasis(Emphasis::Ghost),
]);

Tune the layout with enum-typed options (see the enums reference):

  • ->gap(Gap::ExtraSmall … ExtraLarge) — the space between children.
  • ->align(Align::…) and ->justify(Justify::…) — cross-axis and main-axis alignment.
  • ->width(Width::…) and ->height(Height::…) — sizing.
  • ->float(Side::…) — float the stack to one side.

Grid

Section titled “Grid”

Grid::make()->columns(…) lays children out in a responsive CSS grid:

  • ->columns(3) — three equal columns from the md breakpoint up, one column below.
  • ->columns(['default' => 1, 'md' => 2, 'xl' => 4]) — an explicit count per breakpoint (default, sm, md, lg, xl, 2xl), mobile-first: each value applies from its breakpoint up until a larger breakpoint overrides it.
  • ->columns('2fr 1fr 1fr 1fr') — a raw grid-template-columns track list for unequal columns, e.g. one wide plus three narrow. Track lists work inside breakpoint maps too.

Any child component or field controls how many columns it covers with ->columnSpan(n) (from md up), a breakpoint map, or ->columnSpanFull() to stretch across the whole row.

Grid::make()->columns(3)->schema([
  Badge::make('Wide')->columnSpan(2),
  Badge::make('Narrow'),
  Badge::make('Full width')->columnSpanFull(),
]);

Card

Section titled “Card”

Card::make('Title', 'Description') wraps children in a bordered panel. Both arguments are optional — omit them for a plain panel. Call ->tooltip('…') to attach an ⓘ info popover next to the title; its content is trusted HTML and may include links.

Card::make('Team settings', 'Manage how your team appears.')
  ->tooltip('These settings affect everyone on the team.')
  ->schema([
      Stack::make()->gap(Gap::Small)->schema([
          Heading::make('Members', 2),
          Text::make('Three people have access to this team.'),
          Badge::make('3 active'),
      ]),
      Button::make('Invite member'),
  ]);