Horizontally & Vertically Stack Grid Items – HStack & VStack

Category: CSS & CSS3 , Layout | October 5, 2020
Author:ItsJonQ
Views Total:1,452 views
Official Page:Go to website
Last Update:October 5, 2020
License:MIT

Preview:

Horizontally & Vertically Stack Grid Items – HStack & VStack

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>

You Might Be Interested In:


Leave a Reply