Equal
The Equal layout makes all children equal size within the available space. This component is perfect for creating evenly distributed columns, cards, or any layout where you need all child elements to have the same dimensions regardless of their content.
Example
<div class="equal" style="--layout-gap: 1rem">
<div>Column 1</div>
<div>Column 2 with more content</div>
<div>Column 3</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-gap |
0 |
Gap between child elements |
--layout-items |
stretch |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
--layout-direction |
row |
Flex direction |
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) |