Tailwind CSS Columns

The columns-* utilities in Tailwind CSS create multi-column layouts where content flows from one column to the next — like a newspaper or magazine. Unlike CSS Grid, columns automatically distribute content vertically, making them ideal for masonry-style layouts, image galleries, and flowing text.

How to Set Tailwind Columns

Apply columns with the columns-{count} class:

<div class="columns-3 gap-4">
  <p>First paragraph flows into column 1...</p>
  <p>Second paragraph continues in column 1 or 2...</p>
  <p>Content automatically distributes across columns.</p>
</div>

Preview

Column Count Classes

Set the number of columns:

| Class | Columns | |-------|---------| | columns-1 | 1 column | | columns-2 | 2 columns | | columns-3 | 3 columns | | columns-4 | 4 columns | | columns-5 | 5 columns | | columns-6 | 6 columns | | columns-7 | 7 columns | | columns-8 | 8 columns | | columns-9 | 9 columns | | columns-10 | 10 columns | | columns-11 | 11 columns | | columns-12 | 12 columns | | columns-auto | Browser decides |

Fixed-Width Column Classes

Instead of a column count, set a target width and let the browser figure out how many fit:

| Class | Column Width | |-------|-------------| | columns-3xs | 16rem (256px) | | columns-2xs | 18rem (288px) | | columns-xs | 20rem (320px) | | columns-sm | 24rem (384px) | | columns-md | 28rem (448px) | | columns-lg | 32rem (512px) | | columns-xl | 36rem (576px) | | columns-2xl | 42rem (672px) | | columns-3xl | 48rem (768px) | | columns-4xl | 56rem (896px) | | columns-5xl | 64rem (1024px) | | columns-6xl | 72rem (1152px) | | columns-7xl | 80rem (1280px) |

<div class="columns-sm gap-6">
  <!-- Browser creates as many ~384px columns as fit -->
</div>

Column Gap

Control spacing between columns with gap-{size}:

<div class="columns-3 gap-8">
  <p>Content with wider column gaps.</p>
</div>

Preview

Preventing Column Breaks

Stop elements from being split across columns with break-inside-avoid:

<div class="columns-3 gap-4">
  <div class="break-inside-avoid bg-white rounded-lg p-4 mb-4">
    This card won't be split across columns.
  </div>
  <div class="break-inside-avoid bg-white rounded-lg p-4 mb-4">
    Neither will this one.
  </div>
</div>

Preview

Break After / Break Before

Force column breaks at specific points:

<div class="columns-2">
  <p>First column content</p>
  <p class="break-after-column">This ends column 1</p>
  <p>This starts column 2</p>
</div>

| Class | Effect | |-------|--------| | break-after-column | Force a break after this element | | break-before-column | Force a break before this element | | break-inside-avoid | Prevent breaks inside this element | | break-inside-avoid-column | Prevent column breaks inside |

Masonry-Style Image Gallery

A common pattern — images of different heights flowing naturally:

<div class="columns-3 gap-4">
  <img class="w-full mb-4 rounded-lg break-inside-avoid" src="/photo1.jpg" alt="Photo 1" />
  <img class="w-full mb-4 rounded-lg break-inside-avoid" src="/photo2.jpg" alt="Photo 2" />
  <img class="w-full mb-4 rounded-lg break-inside-avoid" src="/photo3.jpg" alt="Photo 3" />
  <img class="w-full mb-4 rounded-lg break-inside-avoid" src="/photo4.jpg" alt="Photo 4" />
</div>

Responsive Columns

Change the column count at different breakpoints:

<div class="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4">
  <!-- 1 column on mobile, scales up to 4 on desktop -->
</div>

✏️ Arbitrary Value Usage

Set a custom column count or width:

<div class="columns-[200px]">
  <!-- Columns are exactly 200px wide -->
</div>

<div class="columns-[5]">
  <!-- Exactly 5 columns -->
</div>