Composition

How a container shares the space it was given. Six primitives, each answering one question about where a child ends up.

• Stacks And Spacing Use it for toolbars, legends, vertical sections, and repeated rows.
• Grid Fixed tracks are resolved first, auto tracks next, and fraction tracks share whatever remains in proportion to their fraction.
• Alignment Alignment answers one question: where does a child sit inside the space it was given, when it does not fill that space.
• Distribution Distribution decides what happens to the space a stack has left over on its main axis once every child has been measured and every gap applied.
• Groups Use it for badges, grouped labels, and overlays that are not anchor-specific.
• Overlays And Badges Both position a child in a box, and choosing between them is a question of what stays true when sizes change.