Tailwind CSS - Columns

Creating Multi-Column Layouts with Tailwind CSS

Tailwind’s columns utilities allow you to control the flow of content into multiple columns, similar to a newspaper or magazine layout. This is part of the CSS Multi-column Layout module and is ideal for flowing long blocks of text or lists into a more compact and readable format.

Distinguishing Columns from Grid/Flexbox

It’s crucial to understand that CSS Columns are different from CSS Grid or Flexbox. Grid and Flexbox are for laying out items in a container. CSS Columns are for taking a single block of content (like a long paragraph) and flowing it across multiple columns.

Column Utility Classes

You can define columns in two ways: by a fixed count or by an optimal column width. When you set a width, the browser will automatically create as many columns of that width as can fit.

Class	CSS Properties	Description
columns-1 to columns-12	columns: {count};	Creates a specific number of columns.
columns-xs to columns-7xl	columns: {width};	Creates columns of an optimal width.
columns-auto	columns: auto;	Browser default behavior.
columns-[15rem]	columns: 15rem;	Use arbitrary values for precise width control.

Example 1: Responsive Newspaper Layout

This example shows how to format a long article. On small screens, it remains a single column for readability. On medium screens and up, the text flows into two or three columns, making better use of the available horizontal space.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale-1.0">
  <title>Columns Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow">
    <h1 class="text-3xl font-bold mb-4">The History of The Web</h1>
    <div class="text-gray-700 leading-relaxed md:columns-2 lg:columns-3 gap-x-8">
      <p class="mb-4">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="mb-4">Suspendisse potenti. Nunc finibus, nulla ac suscipit rhoncus, libero quam ultricies arcu, a fermentum ex augue eu est. Cras in rhoncus elit. Vivamus vel feugiat mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Morbi id ante vitae erat sollicitudin luctus.</p>
      <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. Curabitur vitae velit ut dui accumsan scelerisque. Integer eget ante et velit tincidunt viverra. Praesent et quam egestas, finibus elit ut, congue arcu.</p>
    </div>
  </div>
</body>
</html>

Controlling Gaps, Rules, and Breaks

For a polished multi-column layout, you’ll need to control the space and dividers between columns, as well as how content breaks.

• Column Gaps: Use the gap-x-* utilities (e.g., gap-x-8) to control the space between columns.
• Column Rules: While Tailwind doesn’t have built-in column-rule utilities, you can easily create them with a plugin or use divide-x-* utilities on a Flexbox/Grid container as an alternative approach if your layout allows.
• Preventing Breaks: To prevent an element (like an image with a caption) from being split across two columns, use the break-inside-avoid utility class on that element.

<div class="columns-2">
  <p>Some content...</p>
  <figure class="break-inside-avoid mb-4">
    <img src="https://placehold.co/400x200" class="w-full rounded-lg">
    <figcaption class="text-sm text-center italic mt-2">This caption will stay with its image.</figcaption>
  </figure>
  <p>More content...</p>
</div>

Best Practices and Use Cases

• Ideal Use Cases: Best for flowing text (articles), lists of links (footers), or image galleries where order isn’t strictly horizontal.
• Responsive is a Must: Multi-column layouts are often not suitable for narrow viewports. Always use responsive variants like md:columns-2 to ensure a good reading experience on all devices.
• Accessibility: Be mindful that content flows from the bottom of one column to the top of the next. This can be a non-standard reading order for screen reader users if not implemented carefully. Ensure the logical order of your content in the HTML is correct.