CSS layout components that (basically) horizontally and vertically stack anything.
βοΈ Check out the code here.
The .spacer
is used in the (below) example to push the items apart.
<div class="flex hstack">
<div>π</div>
<div>π</div>
<div class="spacer"></div>
<div>π</div>
</div>
<div class="flex vstack">
<div>π</div>
<div>π</div>
<div>π</div>
</div>
The example below stacks items vertically on mobile. However, the items stack horizontally at the medium breakpoint for tablets.
<div class="flex vstack hstack@md">
<div>π</div>
<div>π</div>
<div>π</div>
</div>