Sizing - ArchCSS

Percentage sizing

Classes are generated for every integer from 0 to 100 for both width and height in percentage units. All support responsive prefixes via breakpoint-from.

.w-25

.w-50

.w-75

.w-100

<!-- Width -->
<div class="w-50">50% wide</div>
<div class="w-100">Full width</div>

<!-- Height -->
<div class="h-50">50% of parent height</div>
<div class="h-100">Full parent height</div>

<!-- Min / Max -->
<div class="min-w-50 max-w-80">Between 50% and 80%</div>

Pattern	Range	Unit
`.w-{n}`	0 – 100	`%` width
`.h-{n}`	0 – 100	`%` height
`.min-w-{n}`	0 – 100	`%` min-width
`.max-w-{n}`	0 – 100	`%` max-width
`.min-h-{n}`	0 – 100	`%` min-height
`.max-h-{n}`	0 – 100	`%` max-height

Viewport units

Same 0–100 scale using vw and vh units instead of percentages - useful for full-screen sections and modals.

<!-- Hero section: full viewport height -->
<section class="vw-100 vh-100">Hero</section>

<!-- Half-screen modal overlay -->
<div class="vw-100 vh-50">Bottom sheet</div>

Pattern	Range	Unit
`.vw-{n}`	0 – 100	`vw` width
`.vh-{n}`	0 – 100	`vh` height
`.min-vw-{n}`	0 – 100	`vw` min-width
`.max-vw-{n}`	0 – 100	`vw` max-width
`.min-vh-{n}`	0 – 100	`vh` min-height
`.max-vh-{n}`	0 – 100	`vh` max-height

Named helpers

Semantic sizing shorthands for common layout patterns.

<div class="full-width">width: 100%</div>
<div class="full-height">height: 100%</div>
<div class="fullscreen">width: 100vw; height: 100vh</div>
<div class="fit-content">Shrinks to content</div>
<div class="fit-parent">Fills parent 100% × 100%</div>

Class	CSS
`.full-width`	`width: 100%`
`.full-height`	`height: 100%`
`.fullscreen`	`width: 100vw; height: 100vh`
`.fullscreen-width`	`width: 100vw`
`.fullscreen-height`	`height: 100vh`
`.fit-width`	`width: fit-content`
`.fit-height`	`height: fit-content`
`.fit-content`	`width: fit-content; height: fit-content`
`.fit-parent` / `.fit-container`	`width: 100%; height: 100%`
`.fit-screen`	`width: 100vw; height: 100vh`
`.max-width`	`width: max-content`
`.max-height`	`height: max-content`

Pixel-based sizing

Exact pixel dimensions via attribute selectors or utility classes. Width utilities go up to 3200px, height utilities up to 1600px.

<!-- Via class -->
<div class="width-320 height-200">320 × 200px</div>

<!-- Via attribute (HTML-native syntax) -->
<img width="480" height="270" src="..." alt="...">

Square size boxes

The .size-{n} utility creates a square box with flex centering. Available sizes: 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 128, 256, 512, 1024.

size-24

size-48

size-96

<!-- 48×48px centered box -->
<div class="size-48 bg-primary">
  <i data-lucide="star"></i>
</div>

<!-- Icon size variants -->
<div class="size-x-64">Center-justify only (64px wide)</div>
<div class="size-y-64">Center-align only (64px tall)</div>

Tip. .size-{n} sets both width and height to the same pixel value and applies display:flex; align-items:center; justify-content:center - perfect for avatar containers and icon wrappers.