Skip to content

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

License

Notifications You must be signed in to change notification settings

ItsJonQ/hstack-vstack-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🗄 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.

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

Vertically Stacking

<div class="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.

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published