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>