width
Sets element width. Supports px, rem, %, vw units plus auto and inherit.
Class List
| Class Patterns | CSS | Example |
|---|---|---|
w{N}px | width: {N}px | w100px, w200px, w300px |
w{N}rem | width: {N}rem | w10rem (100px), w20rem (200px) |
w{N}p | width: {N}% | w50p (50%), w100p (100%) |
w{N}vw | width: {N}vw | w50vw, w100vw |
wa | width: auto | 브라우저 자동 계산 |
wi | width: inherit | 부모 값 상속 |
Unit Comparison
Same visual width (200px) in 4 different units.
px (pixel) — w200px
Fixed 200px. Always same regardless of screen size
rem (root em) — w20rem
20rem = 200px (1rem = 10px). Proportional to root font size
% (percent) — w50p
50% of parent width. Varies with parent size
vw (viewport width) — w20vw
20% of viewport width. Varies with window size
rem Conversion Guide
Based on html { font-size: 10px }, 1rem = 10px. rem recommended for 20px+.
| px Value | rem Value | Class |
|---|---|---|
| 20px | 2rem | w2rem |
| 50px | 5rem | w5rem |
| 100px | 10rem | w10rem |
| 150px | 15rem | w15rem |
| 200px | 20rem | w20rem |
| 240px | 24rem | w24rem |
| 300px | 30rem | w30rem |
| 400px | 40rem | w40rem |
| 500px | 50rem | w50rem |
Class Details
w{N}pxwidth: {N}px
Fixed pixel width. For small values under 20px. rem recommended for 20px+.
<!-- Fixed Width Button -->
<button class="w100px py8px bg6366F1 cFFFFFF br8px bn cp tac">Confirm</button>
<!-- Fixed width icon box -->
<div class="w48px h48px bg18181B br8px df jcc aic">
<svg width="24" height="24" fill="currentColor">...</svg>
</div>
<!-- Fixed Width Sidebar -->
<div class="df">
<aside class="w200px bg18181B p16px">Sidebar</aside>
<main class="fg1 p16px">Main Content</main>
</div>px size comparison
w{N}remwidth: {N}rem
Width in rem. 1rem = 10px, so w10rem = 100px, w20rem = 200px. For 20px+.
<!-- Card fixed width -->
<div class="w30rem bg18181B p2rem br8px">
300px width card
</div>
<!-- Max width container -->
<div class="w120rem mxa px2rem">
1200px max width container
</div>
<!-- rem Size Comparison -->
<div class="w10rem bg27272A p8px br4px mb8px">w10rem = 100px</div>
<div class="w20rem bg27272A p8px br4px mb8px">w20rem = 200px</div>
<div class="w30rem bg27272A p8px br4px">w30rem = 300px</div>rem size comparison
w{N}pwidth: {N}%
Percentage width based on parent. p = %. Most useful in responsive layouts.
<!-- Full width -->
<div class="w100p bg18181B p16px">100% of parent</div>
<!-- Half-half layout -->
<div class="df">
<div class="w50p bg18181B p16px">Left 50%</div>
<div class="w50p bg27272A p16px">Right 50%</div>
</div>
<!-- Split into thirds -->
<div class="df">
<div class="w33p bg18181B p16px">33%</div>
<div class="w33p bg27272A p16px">33%</div>
<div class="w33p bg18181B p16px">33%</div>
</div>Percentage comparison (parent-based)
w{N}vwwidth: {N}vw
Viewport-based width. w100vw = full screen, based on viewport.
<!-- Viewport full width background -->
<div class="w100vw bg18181B py4rem tac">
Banner covering full screen
</div>
<!-- Viewport half width -->
<div class="w50vw bg27272A p2rem">
Half of viewport
</div>Caution
w100vw includes scrollbar width, may cause horizontal scroll. Prefer w100p.
wawidth: auto
Browser auto-calculates width. Block = full parent, inline = content size. For releasing fixed widths.
<!-- Release fixed width -->
<div class="w200px md-wa">
Default 200px, auto at 1024px and below
</div>
<!-- Auto width to fit content -->
<button class="wa py8px px2rem bg6366F1 cFFFFFF br8px bn cp">
Fit to content
</button>wiwidth: inherit
Inherits parent width value. For passing fixed width to children.
<!-- Inherit parent width -->
<div class="w300px">
<div class="wi bg18181B p16px">
Inherits 300px from parent
</div>
</div>Responsive
Combine with media query prefixes for responsive width.
<!-- Mobile Full → Desktop Half -->
<div class="w100p md-w50p">
Default 100%, 50% at 1024px and below
</div>
<!-- Responsive card width -->
<div class="w100p sm-w50p md-w33p">
Mobile: 100%, Tablet: 50%, Desktop: 33%
</div>
<!-- Fixed Width → Mobile Full -->
<div class="w30rem sm-w100p">
Default 300px, full width at 768px and below
</div>| Class Combination | Behavior |
|---|---|
w100p md-w50p | Default 100% → 50% below 1024px |
w30rem sm-w100p | Default 300px → 100% below 768px |
w50p sm-w100p | Default 50% → 100% below 768px |
w200px md-wa | Default 200px → auto below 1024px |
w25p sm-w50p us-w100p | Default 25% → 768px 50% → 420px 100% |
Tips & Notes
Use w100p for full width
Use w100p for full parent width. w100vw includes scrollbar.
rem for consistent sizing
rem maintains consistency. 1rem = 10px for easy conversion.
Percent based on parent
w50p = 50% of parent width. Verify parent size.
Check box-sizing
By default, width = content only. Include padding/border with bxzbb (box-sizing: border-box).