Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
CSS Stepped Functions (round(),mod(),rem()) enable rounding operations and modulo arithmetic for creating stepped values, grid-aligned layouts, and pattern-based designs!
width: round(157px, 50px); /* Rounds to 150px */Rounds a value to the nearest multiple of an interval.
left: mod(position, 100px); /* Returns remainder */Returns the modulo (remainder) of division. Always has the sign of the divisor.
margin: rem(total, spacing); /* CSS remainder */Returns the remainder. Always has the sign of the dividend.
round()mod()rem()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stepped Functions - Rounding Demo</title>
</head>
<body>
<div class="container">
<h1>📊 Stepped Functions</h1>
<p class="subtitle">Rounding and stepping operations</p>
<div class="demo-area">
<div class="example-group">
<div class="example-title">Round to Nearest 50px</div>
<div class="bar-wrapper">
<div class="bar-label">157px → round(157, 50)</div>
<div class="bar round-150">150px</div>
</div>
<div class="bar-wrapper">
<div class="bar-label">185px → round(185, 50)</div>
<div class="bar round-200">200px</div>
</div>
</div>
<div class="example-group">
<div class="example-title">Floor & Ceiling</div>
<div class="bar-wrapper">
<div class="bar-label">187px → floor (to 50)</div>
<div class="bar floor-150">150px</div>
</div>
<div class="bar-wrapper">
<div class="bar-label">157px → ceil (to 50)</div>
<div class="bar ceil-200">200px</div>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">🔢 Rounding Operations</div>
<p class="info-text">
CSS supports <code>round()</code>, <code>mod()</code>, and <code>rem()</code> functions for stepping
and rounding operations. These functions have <strong>limited browser support</strong>. This demo shows
pre-calculated rounding examples. Once supported, you can round values to specific intervals like 50px,
create stepped layouts, and implement modulo-based patterns!
</p>
</div>
</div>
</body>
</html>Loading preview...