Switcher
The Switcher layout creates a multi-column layout that switches from horizontal to vertical when children become too narrow. This component uses a clever flexbox technique to automatically wrap based on child element minimum width, making it perfect for responsive card layouts, form sections, or any content that needs to gracefully transition between horizontal and vertical arrangements based on available space.
Example
<div class="switcher" style="--layout-gap: 1rem; --layout-threshold: 20rem">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-direction |
row |
Flex direction |
--layout-gap |
0 |
Gap between child elements |
--layout-items |
stretch |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
--layout-threshold |
0 |
Minimum width of each child element before wrapping |
Class Utilities
| Class | Description |
|---|---|
.--column, .--row |
Controls the flex direction |
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |
.--justify-* |
Controls main-axis distribution of items (start, end, center, between, around) |
.--fixed |
Prevents children from growing, centers them instead |
.counted |
Works with .counted utility to calculate threshold based on child count |