🗄 HStack and VStack in CSS

CSS layout components that (basically) horizontally and vertically stack anything.

Usage

✌️ Check out the code here.

Horizontally Stacking

The .spacer is used in the (below) example to push the items apart.

<divclass="flex hstack"><div>🌭</div><div>🍕</div><divclass="spacer"></div><div>🍟</div></div>

Vertically Stacking

<divclass="flex vstack"><div>🌭</div><div>🍕</div><div>🍟</div></div>

Swapping from VStack to HStack (responsively)

The example below stacks items vertically on mobile. However, the items stack horizontally at the medium breakpoint for tablets.

<divclass="flex vstack hstack@md"><div>🌭</div><div>🍕</div><div>🍟</div></div>