columns

Utilities for controlling the number of columns within an element.

Examples

Setting by number

Use columns-<number> utilities like columns-3 to set the number of columns that should be created for the content within an element:

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

Setting the column gap

Use the gap-<width> utilities to specify the width between columns:

<div class="columns-3 gap-8 ...">
  <!-- ... -->
</div>

Customizing your theme

Use theme variables to customise the values these utilities generate:

@theme {
  --text-tiny: 0.625rem;
}