Columns

Tailwind’s multi-column utilities for creating flexible, masonry-style layouts with fine-grained control over layout and spacing.

Set columns by count

Use columns-{count} utilities to set the number of columns created for the content within an element.

<div class="columns-3 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.avif" />
  <img class="aspect-square ..." src="/img/mountains-2.avif" />
  <img class="aspect-square ..." src="/img/mountains-3.avif" />
  <!-- ... -->
</div>

Set columns by width

Utilities like columns-xs and columns-sm set the ideal column width for an element’s content, with column count automatically adjusting to fit.

<div class="columns-2xs ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.avif" />
  <img class="aspect-square ..." src="/img/mountains-2.avif" />
  <img class="aspect-square ..." src="/img/mountains-3.avif" />
  <!-- ... -->
</div>

Adjust the column gap

Use gap-<width> utilities to control the spacing between columns.

<div class="columns-3 gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.avif" />
  <img class="aspect-square ..." src="/img/mountains-2.avif" />
  <img class="aspect-square ..." src="/img/mountains-3.avif" />
  <!-- ... -->
</div>

Responsive column layouts

Prefix a columns utility with a breakpoint, such as sm:, to apply it only at that screen size and above.

<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.avif" />
  <img class="aspect-square ..." src="/img/mountains-2.avif" />
  <img class="aspect-square ..." src="/img/mountains-3.avif" />
  <!-- ... -->
</div>
Previous

Container
Next

Grid