Stack
GdsStack is a one-dimensional layout primitive - use it whenever you want a group of elements lined up in a single direction (top-to-bottom or left-to-right) with consistent spacing between them.
direction-"column"(default) or"row". Can be responsive, e.g.{ xs: "column", md: "row" }.spacing- the gap between children, in theme spacing units (1= 8px by default).divider- optionally render a separator between each child.
Reach for Stack when Grid feels like overkill. Use Grid for true 2D / responsive column layouts; use Stack for “put these things in a row with 16px between them”.
Usage
Direction
Default is "column" (top-to-bottom). Switch to "row" for button bars, breadcrumbs, or any inline grouping.
Responsive direction or spacing
Pass an object to direction or spacing to change behavior per breakpoint. Resize your browser to see the effect.
Dividers
Pass any element as divider and GdsStack renders it between each child - handy for breadcrumbs, action bars, or list items separated by a thin line.
Stack vs Grid - when to use which
| Use Stack when | Use Grid when |
|---|---|
| One direction (row OR column) | Two-dimensional / 12-column layout |
| Equal spacing between all children | Different children need different column widths |
| You want a divider between items | You need responsive offsets |
| Quick button bars, toolbars, vertical forms | Page layouts, card decks, dashboards |
Props
External references
For the full and always up-to-date props, use the MUI references below.