Fifty-fifty
A simple layout pattern that makes two elements of equal width next to eachother, until a threshold is met. When the available space is lower than the threshold, items are positioned below eachother. Can be used with more than 2 items, but does not act the same as the switcher, as items just wrap.
Implementation
<div class="fifty --threshold-{z}">
...
</div>
API
| Custom property | Default | Description |
|---|
--layout-threshold | 0 | Sets the max-width of the child elements |
--layout-gap | 0 | Sets the gap of the targeted element |
Utility classes
| Class name | Required? | Description |
|---|
--threshold-{z} | Required | Controls the --layout-threshold API |
--gap-{z} | | Controls the --layout-gap API |