When to use each
Stack | Group | SimpleGrid | |
|---|---|---|---|
| Direction | vertical | horizontal | grid (2-D) |
| Equal-width children | ❌ | ✅ (grow) | ✅ |
| Wraps onto new lines | ❌ | ✅ | — |
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 three — 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 — great for card grids,
stat panels, and thumbnail galleries. Set cols for how many columns you want,
or minColWidth to fit as many equal columns as possible while keeping each
one at least that wide.
Putting it all together
Most real screens combine several of these at once. This example nests a
Group header with a set of buttons and a SimpleGrid of cards, with a
Stack inside each card.