Columns

Utilities for controlling the number of columns within an element.

Show all classes

Use the utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number.

Adding based on column width

Use the columns-{width} utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value.

This “t-shirt” scale is the same as the max-width scale, with the addition of 2xs and 3xs, since smaller columns may be desirable.

Resize the example to see the expected behaviour

<div class="columns-3xs ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

To specify the width between columns, you can use the gap-x utilities:

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:columns-3 to only apply the utility on hover.

<div class="columns-2 hover:columns-3">
</div>

For a complete list of all available state modifiers, check out the documentation.

To learn more, check out the documentation on , Dark Mode and .

Customizing your theme

By default, Tailwind provides a column count scale from 1-12 as well as a column t-shirt scale from 3xs-7xl. You can customize these values by editing theme.columns or theme.extend.columns in your file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      columns: {
        '4xs': '14rem',
      }
    },
}

Learn more about customizing the default theme in the theme customization documentation.

If you need to use a one-off value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

Learn more about arbitrary value support in the arbitrary values documentation.