Columns

Creates multi-column text layouts, similar to newspaper or magazine columns. This allows long blocks of text to flow naturally across multiple columns, improving readability on larger screens. In Tailwind v4, columns utilities have better support across browsers and work well with other modern CSS features.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="columns-2 gap-8">
  <p>This is the first paragraph of text that will flow across multiple columns.</p>
  <p>This is another paragraph that continues the text flow. The text automatically balances across the columns.</p>
  <p>Here's even more text to demonstrate how content flows from one column to the next, similar to a newspaper layout.</p>
</div>

Examples

Basic two-column layout with gap between columns

<div class="columns-2 gap-8">
  <p>This is the first paragraph of text that will flow across multiple columns.</p>
  <p>This is another paragraph that continues the text flow. The text automatically balances across the columns.</p>
  <p>Here's even more text to demonstrate how content flows from one column to the next, similar to a newspaper layout.</p>
</div>

Edit in playground

Responsive columns that increase with screen size

<!-- Responsive columns that adapt to screen size -->
<div class="columns-1 md:columns-2 lg:columns-3 gap-6">
  <p class="mb-4">First paragraph that spans across columns based on screen size.</p>
  <p class="mb-4">Second paragraph continuing the text flow.</p>
  <p class="mb-4">Third paragraph with more content.</p>
  <p class="mb-4">Fourth paragraph demonstrating the distribution.</p>
  <p class="mb-4">Fifth paragraph showing how text balances.</p>
</div>

Edit in playground

Magazine-style layout with column-spanning heading and media

<!-- Article with column-spanning heading -->
<article class="columns-1 md:columns-2 gap-8 prose max-w-4xl mx-auto">
  <h2 class="column-span-all text-2xl font-bold mb-4">This Heading Spans All Columns</h2>
  <p>First paragraph of the article with substantial text content...</p>
  <p>Second paragraph continuing the article text flow...</p>
  <p>Third paragraph with more content to demonstrate distribution...</p>
  <div class="aspect-video bg-gray-200 mb-4 break-inside-avoid">
    <!-- An image or embed that avoids breaking across columns -->
    <div class="flex items-center justify-center h-full">Image placeholder</div>
  </div>
  <p>Fourth paragraph after the media element...</p>
</article>

Edit in playground

Live Preview

Try the Columns utility with different values

Open Interactive Playground

Variants

Number of columns to create: columns-1 through columns-12 specify a fixed number of columns, columns-auto lets the browser determine the optimal number based on width and content

123456789101112auto