Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Chassis. All credit for the concept and implementation goes to the open source Pylon project.

Heads up! Support for gap utilities with flexbox isn’t available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. Read more.

Vertical

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item

Second item

Third item

html

<div class="vstack gap-medium">
  <div class="p-xsmall">First item</div>
  <div class="p-xsmall">Second item</div>
  <div class="p-xsmall">Third item</div>
</div>

Horizontal

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

First item

Second item

Third item

html

<div class="hstack gap-medium">
  <div class="p-xsmall">First item</div>
  <div class="p-xsmall">Second item</div>
  <div class="p-xsmall">Third item</div>
</div>

Using horizontal margin utilities like .ms-auto as spacers:

First item

Second item

Third item

html

<div class="hstack gap-medium">
  <div class="p-xsmall">First item</div>
  <div class="p-xsmall ms-auto">Second item</div>
  <div class="p-xsmall">Third item</div>
</div>

And with vertical rules:

First item

Second item

Third item

html

<div class="hstack gap-medium">
  <div class="p-xsmall">First item</div>
  <div class="p-xsmall ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-xsmall">Third item</div>
</div>

Examples

Use .vstack to stack buttons and other elements:

html

<div class="vstack gap-xsmall medium:col-5 mx-auto">
  <button type="button" class="button secondary">Save changes</button>
  <button type="button" class="button outline secondary">Cancel</button>
</div>

Create an inline form with .hstack:

html

<div class="hstack gap-medium">
  <input class="form-input me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="button secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="button outline-danger">Reset</button>
</div>

CSS

scss/helpers/_stacks.scss

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}