Addon · Sizing

Spacing that stays in tune.

One number, four flavors. Padding, margin, gap, width, height — all on the same fluid scale.

The scale

A fluid square at every step. Resize the window to see them all adapt at once.

--4

--8

--12

--16

--20

--32

--52

--84

--136

--220

Same number, four scaling curves. Pick the one that matches your design intent.

--64 (standard)

Default fluid scaling.

--64_ (reduced)

Subtler curve. Smaller delta between min and max.

--64__ (extreme)

Aggressive curve. Big mobile shrink.

--64- (extended)

Pushed beyond on large viewports.

Configure your scale

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128)
);

Use as utility

<div class="p-32 g-16">...</div>
<div class="w-220 h-136">...</div>

Use as variable

.card {
  padding: var(--32);
  gap: var(--16__);
}

Full reference

Step-by-step calculation, naming conventions, the $Φ ratio, prefix list. Everything an AI needs.