Skip to main content

Stack

Stack is a layout component that facilitates the vertical or horizontal organization of elements by applying consistent spacing between them. Its main goal is to simplify the alignment of items in a row or column without needing to write additional styles for spacing.

Basic Usage​

Use the is-stack class. It automatically generates a vertical organization and a spacing of 0.5 rem.

Item 1
Item 2
Item 3
<div class="is-stack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Directions​

Use the following classes to define the direction, and the elements will always align to the center.

tip

If you need the elements to align to the start or end, you can use the flex helper classes.

Vertical​

Use the is-vstack class to organize elements vertically.

Horizontal​

Use the is-hstack class to organize elements horizontally.

Spacing​

Use is-gap-{size} to add space between flex items. The size is a value between 0 and 6.

info

For more information on spacing values, visit the customize spacing documentation.

Gap: 4
Item 1
Item 2
Item 3
Gap: 2
Item 1
Item 2
Item 3