Learning CSS - CSS Functions and Dynamic Calculations
This episode covers CSS functions and dynamic calculations: arithmetic operations with calc, value selection with min and max, fluid limits with clamp, and minmax for grid plus other value functions that compute sizes at runtime.
#Introduction
Episode 10 used clamp() for fluid sizes. Episode 16 opens the full box of CSS functions: the math function family that computes values at runtime — calc(), min(), max(), and clamp() — plus minmax(), which is specific to Grid.
CSS usually relies on static, hand-written values. With these functions, you can express relationships: a sidebar that's 25% wide but no more than 300px, or padding that flows between 16px and 48px.
Why does it matter? Math functions replace many media queries and manual calculations. The code becomes shorter, more precise, and still works when surrounding values change — for example when custom properties change too.
#calc: Arithmetic Across Units
calc() computes addition, subtraction, multiplication, and division between values, including between different units:
.sidebar {
width: calc(25% - 16px);
}
.konten {
margin-top: calc(48px + 1rem);
}
.banner {
width: calc(100vw - 100%);
}calc(25% - 16px) subtracts a fixed distance from a percentage width. The + and - operators must be surrounded by spaces; without spaces, the expression is considered invalid. Multiplication and division don't require spaces, but writing them is still recommended for readability.
.kartu {
padding: calc(var(--jarak) * 1.5);
width: calc(100% - var(--jarak-samping) * 2);
}calc() accepts custom properties inside it. This lets spacing and dimensions scale from a single variable — for example padding that's always one and a half times the base spacing.
#min and max: Choosing Values
min() picks the smallest value from a list; max() picks the largest:
.gambar {
width: min(100%, 640px);
}
.hero {
min-height: max(60vh, 480px);
}
.teks {
font-size: max(1rem, 1.2vw);
}min(100%, 640px) reads as "as wide as possible, but no more than 640px" — a clean replacement for the combination of width: 100% and max-width. max(60vh, 480px) ensures the height is never smaller than 480px. Both can take many arguments and mixed units.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}minmax(), specific to Grid, defines a track size range: a minimum of 200px, then growing up to 1fr. Combined with auto-fit, the tracks automatically adjust the number of columns to the available space — one of the most useful responsive Grid patterns.
#clamp: Values Within a Range
clamp(min, preferred, max) combines max(min()) and min(max()) into a single function:
.judul {
font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
padding-inline: clamp(16px, 5vw, 64px);
}
.lebar-form {
width: clamp(280px, 60vw, 720px);
}The preferred value is used when it's between the limits; if it falls outside the range, the closest limit is used. Use a relative unit for the preferred value — vw, %, or calc() — so the result follows the viewport.
.teks-hero {
font-size: clamp(1rem, calc(1rem + 1vw), 1.5rem);
}When the preferred value needs an operation, wrap it in calc(). clamp() itself accepts calc() expressions inside, so this combination stays valid and reads like a single formula.
#Other Value Functions
Beyond math, CSS has value functions useful in daily work:
.item::before {
content: attr(data-ikon) " ";
}
[data-sisa="banyak"]::after {
content: " (" attr(data-sisa) " tersisa)";
}attr() reads an element's attribute value and uses it as content. It can display small data from data-* attributes without extra markup.
.artikel {
counter-reset: bagian;
}
.artikel h2::before {
counter-increment: bagian;
content: counter(bagian) ". ";
}counter() numbers elements automatically in CSS. The counter-reset and counter-increment pair produces sequential numbers without storing the count in HTML — useful for document sections and lists.
#Exercise: A Layout That Calculates Itself
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kalkulasi Dinamis</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layout">
<aside class="sidebar">Sidebar</aside>
<main class="utama">
<h1>Judul Fluid</h1>
<p>Konten yang ukurannya dihitung oleh fungsi CSS.</p>
</main>
</div>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.layout { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: clamp(16px, 3vw, 32px); padding-inline: clamp(16px, 5vw, 64px); max-width: 1200px; margin-inline: auto; min-height: 100vh; }
.sidebar { background-color: #f1f5f9; padding: 24px; border-radius: 12px; }
.utama h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1rem; }
.utama p { max-width: 60ch; font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem); }
@media (max-width: 640px) { .layout { grid-template-columns: 1fr; } }Run npx serve . and drag the window width. The sidebar column is bounded by minmax, the gap and padding flow with clamp, and the title scales itself. The only media query left simply manages the number of columns.
#Common Mistakes and Solutions
#Forgetting Spaces Around Operators
calc(100%-16px) is invalid. The + and - operators need spaces on both sides; * and / don't, but consistent spacing keeps things readable.
#Mixing Incompatible Units
Not all units can be added together. calc(100% + 50px) is valid for width, but mixing px with ch semantically sometimes makes no sense. Understand the units you're combining.
#Forcing Everything Into Functions
Functions add complexity. A clear static value is still better than an unnecessary formula — use calc and friends when the relationship between values is genuinely dynamic.
#Closing
Key takeaways:
calc()performs arithmetic between different units.min()andmax()pick the smallest or largest limit from a list of values.clamp(min, preferred, max)expresses a fluid value in one function.minmax()defines a Grid track size range.attr()andcounter()generate values from HTML dynamically.- The
+and-operators incalcmust be surrounded by spaces. In the next episode, episode 17, we'll cover filter, shadow, and modern visual effects — layered shadows, blur, and image color adjustment purely with CSS.