Horizontally & Vertically Stack Grid Items – HStack & VStack

Preview:

Description:

A pure CSS library that makes it easier to horizontally stack items in a line or to vertically stack items on top of each other using CSS flexbox.

Useful in building a modern responsive grid system without having to write complex CSS codes.

How to use it:

1. Load the main stylesheet styles.css from the src folder.

<link rel="stylesheet" href="./src/styles.css" />

2. Add the required CSS class ‘flex’ to your grid system.

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

3. Stack grid items horizontally.

<div class="flex hstack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

4. Stack grid item vertically.

<div class="flex vstack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

5. Add a spacer to the grid system.

<div class="flex hstack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="spacer"></div>
  <div>Item 3</div>
</div>

6. Determine whether to auto swap between HStack and VStack for tablet/desktop:

• @md: 40em
• @lg: 60em

<div class="flex vstack hstack@md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>