Container & Columns

Constrain page width with the container utility or the max-w-* pattern, and flow text into newspaper-style columns with the columns-* utilities.

Two related jobs: keeping content from stretching too wide, and splitting content into columns.

The container utility#

container sets max-width to the current breakpoint, so the element steps up in width as the viewport grows.

<div class="container mx-auto px-6">…</div>

Customising container#

Because container is now an ordinary utility, you override it with @utility:

@import "tailwindcss";

@utility container {
  margin-inline: auto;
  padding-inline: --spacing(6);
}

Now class="container" alone is centred and padded.

The max-w-* pattern Recommended#

Most modern layouts skip container entirely and use an explicit max width:

<div class="mx-auto max-w-7xl px-6 lg:px-8">…</div>

Why this is usually better:

• The width is stated, not derived from breakpoints.
• It does not jump at breakpoints — it grows smoothly to a ceiling.
• Different sections can use different ceilings (max-w-3xl for prose, max-w-7xl for a grid).

<div class="space-y-3 bg-gray-50 p-4 text-sm">
  <div class="mx-auto max-w-sm rounded bg-indigo-100 p-3 text-center text-indigo-900">max-w-sm</div>
  <div class="mx-auto max-w-md rounded bg-indigo-100 p-3 text-center text-indigo-900">max-w-md</div>
  <div class="mx-auto max-w-2xl rounded bg-indigo-100 p-3 text-center text-indigo-900">max-w-2xl</div>
</div>

max-w-* draws from the --container-* theme namespace, which is the same namespace that powers container query variants.

Multi-column text#

columns-* flows content into newspaper-style columns. The browser balances the content automatically.

<div class="p-4">
  <div class="columns-1 gap-6 text-sm text-gray-700 sm:columns-2">
    <p class="mb-3">Utility-first CSS trades a small amount of markup verbosity for a large reduction in stylesheet complexity. Instead of naming every piece of UI, you describe the result directly.</p>
    <p class="mb-3">The trade pays off most in codebases with a component layer, because repetition collapses into the component rather than into a CSS class.</p>
    <p class="mb-3">Where there is no component layer — static HTML, CMS output — the calculus changes, and hand-written CSS built from theme variables is often the better answer.</p>
  </div>
</div>

Controlling breaks#

<div class="columns-2 gap-8">
  <figure class="mb-4 break-inside-avoid">
    <img src="…" alt="">
    <figcaption>Stays whole.</figcaption>
  </figure>
</div>

Masonry-style galleries#

<div class="columns-2 gap-4 md:columns-3">
  <img class="mb-4 w-full break-inside-avoid rounded-lg" src="…" alt="">
  <img class="mb-4 w-full break-inside-avoid rounded-lg" src="…" alt="">
</div>

Choosing an approach#

Common mistakes#

• Expecting container to centre itself. Add mx-auto in v4.
• No horizontal padding. max-w-7xl alone lets text touch the screen edge on phones. Always pair with px-*.
• Nesting containers. One width constraint per section is enough.
• Using columns-* for layout. It is for content flow. Anything interactive or order-sensitive belongs in a grid.
• Forgetting break-inside-avoid. Cards and figures split across columns without it.

Related topics#

• Sizing — the full max-w-* scale
• Grid — two-dimensional layout
• Spacing — padding and gutters
• Container Queries — the --container-* namespace's other job