The CSS round() function can snap fluid sizing values (from clamp() and container query units) to predictable steps, solving the problem of irregular computed values like 19.7px or 143.2px. The function accepts a rounding mode (up, down, nearest, to-zero), a value, and an interval. Practical use cases include rounding type scales to consistent increments (e.g., nearest 4px), snapping card heights to a layout grid baseline, and maintaining design rhythm across fluid layouts. The calc-size() function can be combined with round() to correctly compute auto heights in CSS grid contexts.

6m read timeFrom ishadeed.com
Post cover image
Table of contents
IntroductionThe problemMeet the round() functionUse cases and examplesThe Third PlaceThe Third PlaceConclusionFurther reading
3 Comments

Sort: