Multi-column layout (Multiple Columns) flows content through newspaper-style columns; break utilities stop cards and headings from splitting across columns or printed pages. box-sizing and aspect-ratio are covered in The Box Model and box-sizing and Sizing.
| Utility | CSS |
|---|---|
| columns-3, columns-xs ... columns-7xl | columns: 3; columns: 20rem ... 80rem |
| break-inside-avoid, -avoid-column | break-inside: avoid, avoid-column |
| break-before-page, break-after-column | break-before: page, break-after: column |
| box-border, box-content | box-sizing: border-box, content-box |
| aspect-square, aspect-video, aspect-3/2 | aspect-ratio: 1 / 1, 16 / 9, 3 / 2 |
A width such as columns-xs asks for as many roughly 20rem columns as fit, which is responsive without breakpoints. The demo builds a masonry-style wall and compares the box-sizing models.
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
<div class="flex gap-4 p-4 font-sans text-xs text-white">
<div class="w-72 columns-3 gap-3 *:mb-3 *:break-inside-avoid *:rounded-lg *:p-1">
<div class="aspect-square bg-sky-600">aspect-square</div>
<div class="aspect-video bg-emerald-600">aspect-video</div>
<div class="aspect-3/2 bg-violet-600">aspect-3/2</div>
<div class="aspect-video bg-amber-500">aspect-video</div>
</div>
<div class="w-44 shrink-0 space-y-2 text-sm text-slate-800">
<div class="box-border w-40 border-8 border-slate-400 p-3">box-border</div>
<div class="box-content w-40 border-8 border-slate-400 p-3">box-content</div>
</div>
</div>
break-inside-avoid keeps each card whole. Both boxes are w-40 (160px), but the box-content one grows by 24px of padding and 16px of border; Preflight already makes box-border the default. Columns read down, then across, so use grid (Grid Utilities) when order across rows matters.