When to use each
Stack | Group | SimpleGrid | Flexible | |
|---|---|---|---|---|
| Direction | vertical | horizontal | grid (2-D) | configurable |
| Equal-width children | ❌ | ✅ (grow) | ✅ | ❌ |
flex-wrap support | ❌ | ✅ | — | ✅ |
| Responsive props | ❌ | ❌ | ✅ (cols) | ✅ (all props) |
Stack
Stack lines things up top-to-bottom. Reach for it any time you're building a
form, a list, a set of cards, or any other vertical flow. It's the simplest of
the four — one direction, no wrapping, just gap for spacing between items.
Group
Group lines things up left-to-right. It's a good fit for toolbars, header
rows, and button clusters. Items wrap onto a new line by default. Use grow
if you want every item to take up equal space, or justify="space-between" to
push items to opposite ends of the row.
SimpleGrid
SimpleGrid arranges items into equal-width columns and reflows the column
count at different screen sizes — great for card grids, stat panels, and
thumbnail galleries. Set cols to a responsive object, and it handles the rest.
Flexible
Flexible is for anything Stack or Group can't do on their own — like
switching between a stacked layout on mobile and a side-by-side layout on
desktop, or reversing the order of items. Every prop (direction, gap,
align, justify, wrap) can change per breakpoint.
Making layouts responsive
Stack and Group always keep the same direction — they don't change based
on screen size.
SimpleGrid and Flexible can change based on screen size. Pass an object
with xs, sm, md, and lg keys instead of a single value, and each size
kicks in once the screen is at least that wide.
Here, SimpleGrid shows fewer columns on a narrow screen and more as it grows:
And here, Flexible switches direction and spacing as the screen widens:
Putting it all together
Most real pages combine several of these at once. This example nests a
Flexible header (which stacks on mobile and lines up on desktop) with a
Group of buttons, a SimpleGrid of cards, and a Stack inside each card.