Stack | Brio

The original idea for stack comes from Every Layout. However, their approach is to use margin-block-start to create a more natural vertical rhythm. In Brio, that became the Flow composition (also by Andy Bell), leaving the .stack composition open to a different interpretation: flexbox vertical rhythm. This makes it more useful for precise flexbox content, where you need full control over how elements in a stacked flex container behave.

Examples

snug A

snug B

snug C

tight A

tight B

tight C

<div class="cluster" style="--cluster-align: stretch">
    <div class="stack box is-bordered" style="inline-size: 14rem">
        <div class="docs-box">A</div>
        <div class="docs-box">B</div>
        <div class="docs-box">C</div>
    </div>
    <div class="stack is-snug box is-bordered" style="inline-size: 14rem">
        <div class="docs-box">snug A</div>
        <div class="docs-box">snug B</div>
        <div class="docs-box">snug C</div>
    </div>
    <div class="stack is-tight box is-bordered" style="inline-size: 14rem">
        <div class="docs-box">tight A</div>
        <div class="docs-box">tight B</div>
        <div class="docs-box">tight C</div>
    </div>
</div>

Spacing Variants and Utilities

Variants

Brio comes with a couple of spacing variants built-in: .is-snug and .is-tight. These match the density grammar used throughout the library. There are more densities, but to keep the library small, these are the only ones included. If you need more, create them in your project's CSS. They are simple, one-line declarations you can as needed. See the source code for examples.

Gap Utilities

Brio also comes with a set of gap utilities that can be used to adjust the spacing between items in a stack. These utilities set the gap property directly. They work because the @utilities cascade layer overrides the composition layer. So, they end up doing the same thing that the variants do using but come for free as part of the utilities layer. See the spacing utilities for more information. You can also override the --stack-gap property to adjust the default gap directly on an element.

default

gap-xl

--stack-gap: var(--space-2xl)

<div class="cluster" style="--cluster-align: stretch">
    <div class="stack box is-bordered" style="inline-size: 14rem">
        <div class="docs-box">default</div>
        <div class="docs-box">A</div>
        <div class="docs-box">B</div>
    </div>
    <div class="stack gap-xl box is-bordered" style="inline-size: 14rem">
        <div class="docs-box">gap-xl</div>
        <div class="docs-box">A</div>
        <div class="docs-box">B</div>
    </div>

    <div class="stack box is-bordered" style="inline-size: 14rem; --stack-gap: var(--space-2xl)">
        <div class="docs-box">--stack-gap: var(--space-2xl)</div>
        <div class="docs-box">A</div>
        <div class="docs-box">B</div>
    </div>
</div>

Centered column

You can use the .is-center to quickly center the content of a stacked flex container. It's also useful when paired with .text-center for text alignment.

Nothing here yet

When something arrives, it'll show up in this space.

<div class="center stack is-center text-center" style="--center-max: 22rem">
        <span class="text-accent">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
            >
                <circle cx="11" cy="11" r="8" />
                <line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>
        </span>
        <h3>Nothing here yet</h3>
        <p class="text-muted">When something arrives, it'll show up in this space.</p>
    </div>

Reference

Source: src/css/composition.css

Applies to

.stack

Classes

Class	Kind	Description
`.is-snug`	variant	A snug gap between stack children
`.is-tight`	variant	A tight gap between stack children
`.is-center`	variant	Centers stack items on the cross axis

Tokens

Token	Default	Description
`--stack-align`	`stretch`	Cross-axis alignment for stack items
`--stack-gap`	`var(--gutter-snug)`	Gap between stack children