Layout Containers
CSS-driven layout containers — Flexbox, CSS Grid, and absolute positioning. All support nesting and the composability contract.
BoxLayout — Horizontal with Flex
Three panels: fixed 120px, flexible center, fixed 120px.
FlowLayout — Tag Cloud
Items wrap to new lines when the container boundary is reached.
GridLayout — Uniform 3-Column Grid
All cells are the same size. Resize the window to see auto-column mode.
BorderLayout — Five-Region Shell
North/South span full width. West/East frame the center.
FlexGridLayout — Form with Mixed Tracks
Label column (120px) + input column (1fr) with auto rows.
CardLayout — Wizard Steps with Fade Transition
Only one card visible at a time. Click buttons to switch.
LayerLayout — Z-Stack with Positioned Layers
Four stacked layers: blue base, semi-transparent overlay, notification badge (top-right), FAB button (bottom-right).
AnchorLayout — Edge-Anchored Children
Children maintain edge distances on resize. Dual-edge anchoring stretches.