Splendid layouts

Basic Usage

horizontal lets you lay things out horizontally. It’s basically just display: flex with a couple of enhancements.

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

Justifying Content

Since horizontal is just display:flex, you can use justify-content to align items horizontally.

<div class="horizontal justify-start">...</div>
<div class="horizontal justify-center">...</div>
<div class="horizontal justify-end">...</div>
<div class="horizontal justify-space-around">...</div>
<div class="horizontal justify-space-between">...</div>

Aligning Items

Likewise, you can use align-items to align items vertically.

<div class="horizontal items-stretch">...</div>
<div class="horizontal items-start">...</div>
<div class="horizontal items-center">...</div>
<div class="horizontal items-end">...</div>
<div class="horizontal items-baseline">...</div>
<div class="horizontal" style="align-items: stretch">...</div>
<div class="horizontal" style="align-items: start">...</div>
<div class="horizontal" style="align-items: center">...</div>
<div class="horizontal" style="align-items: end">...</div>
<div class="horizontal" style="align-items: baseline">...</div>

Changing Gap

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

<div class="horizontal gap-8">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
<div class="horizontal" style="gap: 2rem">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Expanding items

Items can be expanded to stretch the available width if you add flex-grow to the item. Alternatively, you can also set [--grow:1].

<div class="horizontal">
  <div>One</div>
  <div class="flex-grow">Two</div>
  <div>Three</div>
</div>

Overflowing content

If there’s not enough space to contain the children items, horizontal will overflow. When this happens, you can:

<div class="flow">
  <div>LongerItem</div>
  <div>SecondLongerItem</div>
  <div>ThirdLongerItem</div>
</div>

Spacer Items

spacer items can be used to create spaces between items in horizontal. You can think of it like justify-between but with more control over when to create a space.

This technique is often used to create layouts for navigation.

Tip

spacer is simply sets the margin-inline-start to auto, so you can do that if you prefer.

<div class="horizontal">
  <div>Logo</div>
  <div class="spacer">About</div>
  <div>Contact</div>
</div>

One neat thing about spacer is you can treat it like an item. It’s super useful when you’re developing (and still unsure of the final layout).

<div class="vertical md:horizontal">
  <div>Logo</div>
  <div class="spacer"></div>
  <div>About</div>
  <div>Contact</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:horizontal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>