Press "Enter" to skip to content

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements horizontally inline or stack elements vertically on top of each other with Flexbox CSS.

css stack items horizontally, css stack elements vertically, html div horizontal elements, css inline block horizontal align, divs stacking vertically instead of horizontally

How to make use of it:

1. Load the primary 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 objects 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 or not to auto swap between HStack and VStack for tablet/desktop:

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

Horizontally & Vertically Stack Grid Items, HStack and VStack in CSS Plugin/Github, css stack divs vertically flex, html place elements horizontally, stack columns css

HStack-and-VStack-Demo


See Demo And Download

Official Website(ItsJonQ): Click Here

This superior jQuery/javascript plugin is developed by ItsJonQ. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.