Columns

Lays its children out as equal columns when the container is wider than a threshold, and as rows when it is not.

Example

View Code 
<div class="columns" data-threshold="lg">
    <section><h2>Plan</h2><p>Three equal columns in a wide container.</p></section>
    <section><h2>Build</h2><p>Three rows in a narrow one.</p></section>
    <section><h2>Ship</h2><p>No breakpoint anywhere.</p></section>
</div>

When to use it

Use columns for a set of equals: pricing tiers, feature summaries, a row of statistics. They should be side by side when there is room and one under another when there is not, and the container, not the screen, should decide which.

How it works

Every child has the same flex-basis: the threshold minus the container's width, multiplied by a large number. In a container wider than the threshold that number is hugely negative, which flex-basis clamps to zero, so flex-grow: 1 shares the row equally between them. In a narrower one it is hugely positive, so each child fills a row. data-limit caps how many share a row; any child past the cap takes a full row of its own.

<div class="columns" data-threshold="sm" data-limit="2">
    <div>One</div>
    <div>Two</div>
    <div>Three, on its own row</div>
</div>

A child with data-span takes that many shares of the row: data-span="2" beside a plain sibling is Foundation 6's eight-and-four, with no breakpoint, and it still stacks with the rest below the threshold.

<div class="columns">
    <article data-span="2">Two thirds.</article>
    <aside>One third.</aside>
</div>

Why this name

Yeti names layouts for what they do to their children, and what this one gives them is columns; the switching is the mechanism, not the point. Foundation 6 readers will recognise the job of .grid-x with medium-4 cells; the difference is that the threshold is a container width, so the same markup works in a sidebar and a full-width band.

Attributes

Attribute Type Values Default Description
data-threshold enum 2xs, xs, sm, md, lg, xl, 2xl md The container width below which the columns become rows.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between columns, and between rows once they stack.
data-align enum start, center, end, stretch, baseline stretch Vertical alignment of the columns.
data-justify enum start, center, end, between, around, evenly start Distribution of the columns along the row when they do not fill it.
data-limit enum 2, 3, 4, 5 The most columns allowed on one row; further children each take a full row.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-span enum 1, 2, 3, 4, 5, 6 > * How many shares of the row the child takes: 2 is twice a plain sibling. Below the threshold it stacks like the rest.

Children

  • > *: at least 2. The columns. Each gets an equal share of the row.
  • > [data-span]: any number. A child that takes several shares of the row: data-span="2" is twice a plain sibling. Below the threshold it stacks like the rest.

Tokens

Token Description
--yeti-width-md The default threshold.
--yeti-space-md The default gap.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-threshold` - `--_yeti-align` - `--_yeti-justify`

Accessibility

  • Purely visual. Reading order is source order in both arrangements.

Browser support

  • Used without guards: flexbox gap, calc() in flex-basis
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.