Utilities

remCSS utilities are single-purpose classes in @layer utilities — they always win over component styles in the cascade.

Spacing

Margin and padding utilities on the Golden Ratio scale. Steps available: n3, n2, n1, 0, 1, 2, 3, 4, 5, 6, 7, 8.

Margin

<!-- All sides -->
<div class="m-2">...</div>
<!-- margin: var(--step-2) -->
<div class="m-0">...</div>
<!-- margin: 0 -->
<div class="m-auto">...</div>
<!-- margin: auto -->

<!-- Block (vertical) -->
<div class="mt-1">...</div>
<!-- margin-block-start -->
<div class="mb-2">...</div>
<!-- margin-block-end -->
<div class="my-3">...</div>
<!-- margin-block (both) -->

<!-- Inline (horizontal) -->
<div class="ml-1">...</div>
<!-- margin-inline-start -->
<div class="mr-2">...</div>
<!-- margin-inline-end -->
<div class="mx-3">...</div>
<!-- margin-inline (both) -->

<!-- Negative steps -->
<div class="mt-n1">...</div>
<!-- margin-block-start: var(--step-n1) -->

Padding

<!-- All sides -->
<div class="p-2">...</div>
<!-- padding: var(--step-2) -->

<!-- Block (vertical) -->
<div class="pt-1">...</div>
<!-- padding-block-start -->
<div class="pb-2">...</div>
<!-- padding-block-end -->
<div class="py-3">...</div>
<!-- padding-block (both) -->

<!-- Inline (horizontal) -->
<div class="pl-1">...</div>
<!-- padding-inline-start -->
<div class="pr-2">...</div>
<!-- padding-inline-end -->
<div class="px-3">...</div>
<!-- padding-inline (both) -->

Reference Table

Step	rem	px (10px base)
n3	0.236rem	2.36px
n2	0.382rem	3.82px
n1	0.618rem	6.18px
0	1.000rem	10.00px
1	1.618rem	16.18px
2	2.618rem	26.18px
3	4.236rem	42.36px
4	6.854rem	68.54px
5	11.09rem	110.9px

Flexbox

<!-- Base -->
<div class="flex">...</div>
<!-- display: flex -->
<div class="flex-col">...</div>
<!-- flex-direction: column -->
<div class="flex-wrap">...</div>
<!-- flex-wrap: wrap -->
<div class="flex-nowrap">...</div>
<!-- flex-wrap: nowrap -->
<div class="inline-flex">...</div>
<!-- display: inline-flex -->

<!-- Justify (main axis) -->
<div class="justify-start">...</div>
<div class="justify-end">...</div>
<div class="justify-center">...</div>
<div class="justify-between">...</div>
<div class="justify-around">...</div>

<!-- Align (cross axis) -->
<div class="items-start">...</div>
<div class="items-end">...</div>
<div class="items-center">...</div>
<div class="items-baseline">...</div>
<div class="items-stretch">...</div>

<!-- Gap (GR steps) -->
<div class="flex gap-1">...</div>
<!-- gap: var(--step-1) -->
<div class="flex gap-2">...</div>
<div class="flex gap-3">...</div>

<!-- Flex sizing -->
<div class="flex-1">...</div>
<!-- flex: 1 1 0% -->
<div class="flex-auto">...</div>
<!-- flex: 1 1 auto -->
<div class="flex-none">...</div>
<!-- flex: none -->
<div class="shrink-0">...</div>
<!-- flex-shrink: 0 -->
<div class="grow">...</div>
<!-- flex-grow: 1 -->

Cluster Pattern

A common layout: items wrapping with consistent gap — use flex flex-wrap gap-N:

<div class="flex flex-wrap gap-1 items-center">
	<span class="badge">CSS</span>
	<span class="badge">Golden Ratio</span>
	<span class="badge">rem-only</span>
</div>

Grid

<!-- Auto-responsive grid (min column ~20rem, fills all columns) -->
<div class="grid-auto">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>

<!-- Sidebar layout (sidebar + main) -->
<div class="grid-sidebar">
	<aside>Sidebar</aside>
	<main>Content</main>
</div>

<!-- Explicit column counts -->
<div class="grid cols-2">...</div>
<div class="grid cols-3">...</div>
<div class="grid cols-4">...</div>

<!-- Gap -->
<div class="grid cols-3 gap-2">...</div>

Auto Grid Details

.grid-auto uses repeat(auto-fit, minmax(min(20rem, 100%), 1fr)). This means:

• Columns are at least 20rem wide
• They fill all available space
• On narrow containers they collapse to a single column automatically — no breakpoints required