Splendid layouts

Basic Usage

vertical lets you lay things out vertically. It’s display: flex + flex-flow: column with a couple of enhancements.

<div class="vertical">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Changing Gap

You can change the gap between items with the gap property or the --gap variable.

<div class="vertical gap-8">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Horizontal Alignment

vertical uses align-items to align items horizontally.

<div class="vertical items-stretch">...</div>
<div class="vertical items-start">...</div>
<div class="vertical items-center">...</div>
<div class="vertical items-end">...</div>

Aligning children items

You can use align-self to align each child item individually.

<div class="vertical">
  <div>Default</div>
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-end">End</div>
</div>

Expanding Items with flex-grow

vertical uses flexbox under the hood, so you can use flex-grow to expand a child item vertically if the height of the container allows it to expand.

This technique is used in shell-simple to expand content to fill up the remaining height of the container so footer stays at the bottom.

<div class="grid-auto-fr">
  <div class="vertical">
    <div class="flex-grow">Top</div>
    <div>Bottom</div>
  </div>
  <div>...</div>
</div>

Spacer Items

vertical also has spacer items that lets you create space between items. As with the previous section on expanding items, this will only work if your vertical layout contains sufficient height.

Tip

spacer just sets margin-block-start: auto.

<div class="grid-auto-fr">
  <div class="vertical">
    <div>Top</div>
    <div class="spacer">Bottom</div>
  </div>
  <div>...</div>
</div>

Vertical to Horizontal

One of the most common responsive tactics is to switch from a vertical layout to a horizontal layout when there is enough space. You can use Tailwind Responsive modifiers to do this.

<div class="vertical md:vertical">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>