calc (Arithmetic)
Use calc() in Atomic CSS. Supported in all unit properties (width, height, margin, padding, top, left, etc.).
Basic Syntax
Basic format: property prefix + calc + valueA unit + - + valueB unit. Default operation is subtraction (-).
| Class | CSS | Description |
|---|---|---|
wcalc100p-200px | width: calc(100% - 200px) | Full width minus sidebar |
wcalc100p-25rem | width: calc(100% - 250px) | Fluid width minus fixed area |
hcalc100vh-6rem | height: calc(100vh - 60px) | Viewport height minus header |
hcalc100vh-12rem | height: calc(100vh - 120px) | Height minus header + footer |
maxwcalc100p-4rem | max-width: calc(100% - 40px) | 20px margin on each side |
minwcalc50p-2rem | min-width: calc(50% - 20px) | Min width (half - gap) |
minhcalc100vh-8rem | min-height: calc(100vh - 80px) | Ensure minimum height |
tcalc50p-2rem | top: calc(50% - 20px) | Near vertical center position |
lcalc100p-3rem | left: calc(100% - 30px) | 30px before right edge |
mtcalc50p-5rem | margin-top: calc(50% - 50px) | Vertical center margin |
pcalc2rem-4px | padding: calc(2rem - 4px) | Padding fine-tuning |
gapcalc2rem-4px | gap: calc(2rem - 4px) | Gap fine-tuning |
fscalc1-6rem-2px | font-size: calc(1.6rem - 2px) | Font size fine-tuning |
brcalc2rem-4px | border-radius: calc(2rem - 4px) | Border-radius fine-tuning |
Arithmetic Keywords
Besides subtraction, addition, multiplication, division available. Use calc-add, calc-sub, calc-mul, calc-div.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Keyword | Operation | Example | CSS |
|---|---|---|---|
calc | 빼기 (-) | wcalc100p-200px | width: calc(100% - 200px) |
calc-sub | 빼기 (-) | wcalc-sub100p-200px | width: calc(100% - 200px) |
calc-add | 더하기 (+) | wcalc-add50p-100px | width: calc(50% + 100px) |
calc-mul | 곱하기 (*) | wcalc-mul2rem-3 | width: calc(2rem * 3) |
calc-div | 나누기 (/) | wcalc-div100p-3 | width: calc(100% / 3) |
Supported Properties
Usable in all properties accepting units.
Layout & Position
whminwmaxwminhmaxhtrblSpacing
mmtmrmbmlpptprpbplgaprgcgTypography
fslhlswstiBorder
brbwbtwbrwbbwblwbsGrid
gtcgtrGrid calc
Also usable in grid-template-columns/rows.
| Class | CSS |
|---|---|
gtccalc100p-200px-1fr | grid-template-columns: calc(100% - 200px) 1fr |
gtccalc100p-25rem-1fr | grid-template-columns: calc(100% - 250px) 1fr |
gtccalc-add50p-100px | grid-template-columns: calc(50% + 100px) |
gtccalc-div100p-3-1fr | grid-template-columns: calc(100% / 3) 1fr |
Usage Examples
<!-- === Layout === -->
<!-- Sidebar + Content -->
<div class="df">
<aside class="w25rem">Sidebar</aside>
<main class="wcalc100p-25rem">Content area</main>
</div>
<!-- Header + Content + Footer (excluding Header 60px, Footer 60px) -->
<div class="df fdc h100vh">
<header class="h6rem">Header</header>
<main class="hcalc100vh-12rem oa">Content (scroll)</main>
<footer class="h6rem">Footer</footer>
</div>
<!-- ═══ Responsive Width ═══ -->
<!-- Container with margins on both sides -->
<div class="maxwcalc100p-4rem mxa">
Reserve 20px margin on each side
</div>
<!-- 2-column layout (accounting for gap) -->
<div class="df gap2rem">
<div class="wcalc50p-1rem">Left (50% - half of gap)</div>
<div class="wcalc50p-1rem">Right (50% - half of gap)</div>
</div>
<!-- === Positioning === -->
<!-- Centered tooltip (absolute) -->
<div class="pa t50p lcalc50p-8rem">
Center a 160px width tooltip horizontally
</div>
<!-- Fixed distance from right edge -->
<button class="pa tcalc100p-5rem r2rem">
Fixed 50px above bottom
</button>
<!-- === Arithmetic operations === -->
<!-- 1/3 width -->
<div class="wcalc-div100p-3">1/3 of full</div>
<!-- Add fixed value to 50% -->
<div class="wcalc-add50p-100px">50% + 100px</div>
<!-- Multiple of default -->
<div class="wcalc-mul4rem-3">4rem × 3 = 120px</div>
<!-- === calc in Grid === -->
<!-- Fixed sidebar + Fluid Content -->
<div class="dg gtccalc100p-25rem-1fr gap2rem">
<main>Content</main>
<aside>Sidebar 250px</aside>
</div>
<!-- === Fine adjustments === -->
<!-- Padding accounting for border -->
<div class="b2pxsolidDDDDDD pcalc2rem-2px">
Subtract border width from padding
</div>
<!-- Full width accounting for scrollbar -->
<div class="wcalc100vw-17px">
Full width excluding scrollbar (~17px)
</div>Tips
% written as p
100% = 100p. E.g.: wcalc100p-200px → width: calc(100% - 200px)
Default operation is subtraction
calc alone = subtraction. For others use calc-add, calc-mul, calc-div.
Decimals use hyphens
1.5rem = 1-5rem. E.g.: wcalc100p-1-5rem