Tailwind CSS Columns Cheatsheet

Create newspaper-style multi-column layouts with Tailwind CSS.
Click any class to copy it to your clipboard.

What are CSS Columns?

CSS columns allow you to create multi-column layouts where content flows automatically from one column to the next, similar to newspaper or magazine layouts. Unlike CSS Grid, which requires explicit placement, columns let content flow naturally across the available space.

Columns Count - Visual Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

columns-3

Columns (by count)

Class	CSS
columns-1	columns: 1;
columns-2	columns: 2;
columns-3	columns: 3;
columns-4	columns: 4;
columns-5	columns: 5;
columns-6	columns: 6;
columns-7	columns: 7;
columns-8	columns: 8;
columns-9	columns: 9;
columns-10	columns: 10;
columns-11	columns: 11;
columns-12	columns: 12;
columns-auto	columns: auto;

Column Width - Auto Column Count

When you set a column width, the browser automatically creates as many columns as fit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

columns-sm (24rem)

Columns (by width)

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

Break Inside - Keep Elements Together

Use break-inside-avoid to prevent elements from being split across columns.

Card 1

This is some content that belongs together. With break-inside-avoid, this card won't be split across columns.

Card 2

This is some content that belongs together. With break-inside-avoid, this card won't be split across columns.

Card 3

This is some content that belongs together. With break-inside-avoid, this card won't be split across columns.

Card 4

This is some content that belongs together. With break-inside-avoid, this card won't be split across columns.

Card 5

This is some content that belongs together. With break-inside-avoid, this card won't be split across columns.

break-inside-avoid

Break After Column - Force Column Break

Use break-after-column to force the next element to start in a new column.

Section 1

This section has break-after-column

Section 2

Starts in new column

Section 3

Flows normally

Break After

Class	CSS
break-after-auto	break-after: auto;
break-after-avoid	break-after: avoid;
break-after-all	break-after: all;
break-after-avoid-page	break-after: avoid-page;
break-after-page	break-after: page;
break-after-left	break-after: left;
break-after-right	break-after: right;
break-after-column	break-after: column;

Break Before

Class	CSS
break-before-auto	break-before: auto;
break-before-avoid	break-before: avoid;
break-before-all	break-before: all;
break-before-avoid-page	break-before: avoid-page;
break-before-page	break-before: page;
break-before-left	break-before: left;
break-before-right	break-before: right;
break-before-column	break-before: column;

Break Inside

Class	CSS
break-inside-auto	break-inside: auto;
break-inside-avoid	break-inside: avoid;
break-inside-avoid-page	break-inside: avoid-page;
break-inside-avoid-column	break-inside: avoid-column;

Practical Examples

Masonry-Like Layout with Columns

CSS columns can create a masonry-like effect where items of different heights flow naturally.

Short

Tall

Medium

Short

Tall

Short

Medium

Medium

<div class="columns-3 gap-4">
  <div class="break-inside-avoid mb-4">Item 1</div>
  <div class="break-inside-avoid mb-4">Item 2</div>
  <!-- ... -->
</div>

Text Columns - Magazine/Newspaper Style

Perfect for long-form content that needs to be displayed in a newspaper-style layout.

The Art of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Good typography establishes a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone. It guides and informs users, optimizes readability and accessibility.

The history of typography began with the invention of movable type in the mid-15th century by Johannes Gutenberg. His printing press revolutionized the production of books and made knowledge more accessible.

Today, web typography has become increasingly important as designers work to create beautiful, readable experiences across all devices and screen sizes.

<article class="columns-2 md:columns-3 gap-6">
  <p>First paragraph...</p>
  <p>Second paragraph...</p>
  <!-- Content flows automatically -->
</article>

Columns vs Grid: When to Use Each

CSS Columns

+Best for flowing text content
+Automatic content distribution
+Great for masonry-like layouts
+Newspaper/magazine style layouts
-Less control over item placement
-Items can break across columns

CSS Grid

+Precise two-dimensional control
+Explicit row and column placement
+Complex layouts with spanning
+Best for UI components/layouts
-More verbose for simple flows
-Items don't flow automatically

Rule of thumb: Use columns for flowing content (text, cards that should fill space), use grid for structured layouts where you need precise control.

Common Column Patterns

Responsive Columns

<div class="columns-1 md:columns-2 lg:columns-3">
  <!-- Content flows across columns -->
</div>

Card Masonry

<div class="columns-3 gap-4">
  <div class="break-inside-avoid mb-4">
    Card content
  </div>
</div>

Article Text

<article class="columns-2 gap-8">
  <p>Paragraph 1...</p>
  <p>Paragraph 2...</p>
</article>

Width-Based Columns

<div class="columns-xs gap-6">
  <!-- Auto column count based on
       20rem min width -->
</div>

Column Gap

Use the gap-* utilities to control the space between columns. See the spacing reference for all values.

gap-416px (1rem)

gap-624px (1.5rem)

gap-832px (2rem)

gap-1248px (3rem)

Frequently Asked Questions

What are CSS columns in Tailwind?

Tailwind's column utilities control the CSS multi-column layout, which automatically flows content across multiple columns like newspaper-style layouts. Use columns-2, columns-3, etc. to set the number of columns.

What is the difference between columns and grid in Tailwind?

CSS Grid creates a two-dimensional layout with explicit rows and columns, while CSS columns create a newspaper-style flow where content automatically moves to the next column. Grid is better for structured layouts, columns is better for flowing text content.

How do I prevent elements from breaking across columns?

Use break-inside-avoid to prevent an element from being split across columns. For cards, images, or grouped content, this keeps them intact within a single column.

Can I set column width instead of column count?

Yes! Tailwind provides column width utilities like columns-xs (20rem), columns-sm (24rem), columns-md (28rem), etc. The browser will automatically create as many columns as fit within the container.

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect columns, spacing, typography, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →