Columns

Basic usage

Adding based on column count

Use the columns-{count} 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.

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

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.

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

Setting the column gap

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

<div className="**gap-8** columns-3 ...">
  <img className="w-full aspect-video ..." src="..." />
  <img className="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>