Aspect Ratio & More Layout

Aspect Ratio, Columns & Object Fit

Aspect ratio

Control the aspect ratio of an element:

<div class="aspect-video">...</div>   <!-- 16:9 -->
<div class="aspect-square">...</div>  <!-- 1:1 -->
<div class="aspect-3/2">...</div>     <!-- any ratio -->

• aspect-auto, aspect-square (1/1), aspect-video (16/9).
• Any ratio works: aspect-3/2, aspect-[7/9].
• Custom: @theme { --aspect-retro: 4/3; } → aspect-retro.

Object fit

Fit media inside its box:

<img class="h-48 w-full object-cover" src="..." alt="..." />

• object-contain - fit entirely, may letterbox.
• object-cover - fill, cropping excess.
• object-fill, object-none, object-scale-down.
• Position with object-top, object-center, etc.

Columns

Multi-column layout:

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

• By number: columns-3.
• By width: columns-3xs … columns-7xl.
• columns-auto.

Float & clear

float-right, float-left, float-none and clear-left, clear-right, clear-both, clear-none.

Isolation

isolate creates a new stacking context; isolation-auto resets it.

TL;DR

• aspect-video, aspect-square, aspect-3/2 set ratios.
• object-cover / object-contain fit images.
• columns-3 creates multi-column text.
• float- and clear- work as expected.