Utilities: Sizing - Launchpad

Fractional Widths

w-full (100%)

w-1-2 (50%)

w-1-3 (33.33%)

w-2-3 (66.66%)

w-1-4 (25%)

w-3-4 (75%)

<div class="lp-space-y-2">
    <div class="lp-demo-box lp-p-2 lp-w-full">w-full (100%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-1-2">w-1-2 (50%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-1-3">w-1-3 (33.33%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-2-3">w-2-3 (66.66%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-1-4">w-1-4 (25%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-3-4">w-3-4 (75%)</div>
</div>

Percentage Widths

w-25 (25%)

w-50 (50%)

w-75 (75%)

w-100 (100%)

<div class="lp-space-y-2">
    <div class="lp-demo-box lp-p-2 lp-w-25">w-25 (25%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-50">w-50 (50%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-75">w-75 (75%)</div>
    <div class="lp-demo-box lp-p-2 lp-w-100">w-100 (100%)</div>
</div>

Fixed Pixel Widths

.lp-wf-{n} where n is scale units (1=0.25rem).

wf-16 (4rem)

wf-24 (6rem)

wf-32 (8rem)

wf-48 (12rem)

wf-64 (16rem)

<p class="lp-text-sm lp-text-muted lp-mb-3"><code class="lp-text-danger">.lp-wf-{n}</code> where n is scale units (1=0.25rem).</p>
<div class="lp-space-y-2">
    <div class="lp-demo-box lp-p-2 lp-wf-16">wf-16 (4rem)</div>
    <div class="lp-demo-box lp-p-2 lp-wf-24">wf-24 (6rem)</div>
    <div class="lp-demo-box lp-p-2 lp-wf-32">wf-32 (8rem)</div>
    <div class="lp-demo-box lp-p-2 lp-wf-48">wf-48 (12rem)</div>
    <div class="lp-demo-box lp-p-2 lp-wf-64">wf-64 (16rem)</div>
</div>

Max-Width Scale

max-w-xs (20rem)

max-w-sm (24rem)

max-w-md (28rem)

max-w-lg (32rem)

max-w-xl (36rem)

max-w-2xl (42rem)

<div class="lp-space-y-2">
    <div class="lp-demo-box lp-p-2 lp-max-w-xs">max-w-xs (20rem)</div>
    <div class="lp-demo-box lp-p-2 lp-max-w-sm">max-w-sm (24rem)</div>
    <div class="lp-demo-box lp-p-2 lp-max-w-md">max-w-md (28rem)</div>
    <div class="lp-demo-box lp-p-2 lp-max-w-lg">max-w-lg (32rem)</div>
    <div class="lp-demo-box lp-p-2 lp-max-w-xl">max-w-xl (36rem)</div>
    <div class="lp-demo-box lp-p-2 lp-max-w-2xl">max-w-2xl (42rem)</div>
</div>

Heights

hf-8

hf-12

hf-16

hf-24

<div class="lp-d-flex lp-gap-3 lp-items-end">
    <div class="lp-demo-box lp-p-2 lp-wf-12 lp-hf-8">hf-8</div>
    <div class="lp-demo-box lp-p-2 lp-wf-12 lp-hf-12">hf-12</div>
    <div class="lp-demo-box lp-p-2 lp-wf-12 lp-hf-16">hf-16</div>
    <div class="lp-demo-box lp-p-2 lp-wf-12 lp-hf-24">hf-24</div>
</div>

Viewport Units

Use .lp-vh-{25|50|75|100} for viewport heights.

vh-25 (25% of viewport height)

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-text-danger">.lp-vh-{25|50|75|100}</code> for viewport heights.</p>
<div class="lp-demo-box lp-p-3 lp-vh-25 lp-w-full">vh-25 (25% of viewport height)</div>

Object Fit

Controls how an <img> fits its container.

object-cover

object-contain

object-fill

<p class="lp-text-sm lp-text-muted lp-mb-3">Controls how an <code class="lp-text-danger">&lt;img&gt;</code> fits its container.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div>
        <div class="lp-text-xs lp-mb-1">object-cover</div>
        <div class="lp-demo-frame lp-wf-32 lp-hf-32 lp-p-0"><img src="https://picsum.photos/200/300?random=1" class="lp-w-full lp-h-full lp-object-cover" alt=""></div>
    </div>
    <div>
        <div class="lp-text-xs lp-mb-1">object-contain</div>
        <div class="lp-demo-frame lp-wf-32 lp-hf-32 lp-p-0"><img src="https://picsum.photos/200/300?random=2" class="lp-w-full lp-h-full lp-object-contain" alt=""></div>
    </div>
    <div>
        <div class="lp-text-xs lp-mb-1">object-fill</div>
        <div class="lp-demo-frame lp-wf-32 lp-hf-32 lp-p-0"><img src="https://picsum.photos/200/300?random=3" class="lp-w-full lp-h-full lp-object-fill" alt=""></div>
    </div>
</div>

CSS Reference

Class	Description
`.lp-w-{25\|50\|75\|100\|auto}`	Percentage widths
`.lp-w-{full\|1-2\|1-3\|2-3\|1-4\|3-4\|1-5..4-5\|1-6\|5-6}`	Fractional widths
`.lp-wf-{0..96}`	Fixed pixel widths (scale units)
`.lp-h-{25\|50\|75\|100\|full\|auto}`	Percentage heights
`.lp-hf-{0..96}`	Fixed pixel heights
`.lp-max-w-{xs..7xl}`	Max-width scale (20rem → 80rem)
`.lp-max-w-none`	Remove max-width
`.lp-min-w-0` / `.lp-min-w-full`	Min-width
`.lp-vh-{25\|50\|75\|100}`	Viewport height
`.lp-vw-100`	Viewport width
`.lp-min-h-screen` / `.lp-max-h-screen`	Screen-height min/max
`.lp-object-{contain\|cover\|fill\|none\|scale-down}`	Object fit
`.lp-object-{top\|right\|bottom\|left\|center\|...}`	Object position

Sizing Utilities