Layout Compositions
Compositions are layout patterns that create structure and handle responsive behavior. They provide consistent spacing and flexible layouts that adapt to different screen sizes.
Flow
Flow creates consistent vertical spacing between elements. Each element gets margin-top based on the --flow-space custom property.
Flow Example
This paragraph has consistent spacing from the heading above.
This paragraph also has the same spacing, creating visual rhythm.
The spacing is controlled by the --flow-space variable.
Switcher
Switcher allows 2 items to sit side by side until there's not enough space, then they stack.
Left Item
This item will sit next to the right item on larger screens and stack on smaller ones.
Right Item
This demonstrates the switcher's responsive behavior.
Cluster
Cluster distributes items with consistent spacing, regardless of their size.
Grid
Auto-fill grid that creates responsive columns with configurable item sizes.
Grid Item 1
This grid automatically adjusts the number of columns based on available space.
Grid Item 2
Each item has a minimum size defined by --grid-min-item-size.
Grid Item 3
The grid uses auto-fill to create as many columns as possible.
Grid Item 4
Items grow to fill available space while maintaining minimum size.
Grid Halves Layout
Left Half
This grid uses the halves layout for a 50/50 split.
Right Half
Perfect for two-column layouts that stack on mobile.
Sidebar
Sidebar creates a flexible main content area with a fixed-width sidebar.
Repel
Repel pushes items away from each other with space-between, stacking on small viewports.
Left Item
This item is pushed to the left.
Right Item
This item is pushed to the right.
No Wrap Repel
No Wrap Item 1
This repel has data-nowrap to prevent wrapping.
No Wrap Item 2
Items will stay on the same line even on small screens.