CSS Function - clamp()

The CSS clamp() function keeps a value within a range defined by a minimum and a maximum value.

It has three parameters: a minimum value, a preferred value, and a maximum allowed value.

Possible Values

The clamp(min, val, max) function takes three comma-separated expressions as parameters.

  • min - The minimum value represents the smallest or most negative value and is the lower limit of the allowable range. If the preferred value is lower than this minimum value, the minimum value is used.

  • val - The preferred value is the expression used when it is within the range defined by the minimum and maximum values.

  • max - If the preferred value exceeds this upper limit, the maximum value is assigned to the property, i.e., the largest (most positive) allowed expression value.

Expressions in clamp() can include math functions, literal values, or other valid argument types. Direct addition, subtraction, multiplication and division are allowed.

Parentheses can be used to specify the order of calculations.

Points to remember:

  • Percentages in table dimensions (widths and heights) are interpreted as auto for columns, column groups, rows, row groups, and cells in both auto and fixed layout tables.

  • Nesting of max() and min() functions is allowed in CSS expressions, where inner functions are treated like parentheses.

    Full math expressions, including addition, subtraction, multiplication, and division, can be used without requiring the calc() function in nested max() and min() functions.

  • The expression may contain addition (+), subtraction (-), multiplication (*), and division (/) operators, following the usual precedence rules.

    Spaces should be added on either side of + and - operands. The operands can be any syntax <length> values and use different units. Parentheses may be used to control the order of calculations.

  • Frequently it may be necessary to use min() and max() functions within a clamp() function.

Return Value

The clamp(MIN, VAL, MAX) function is resolved as max(MIN, min(VAL, MAX)).

The function returns a value of type <length>, <frequency>, <angle>, <time>, <percent>, <number> or <integer>, , depending on the given parameters.

Syntax

clamp( <calc-sum>#{3} )

The hash (#) mark multiplier indicates that the entity may be repeated one or more times (here 3 times), but each occurrence is separated by a comma (',').

CSS clamp() - Basic Example

The following example demonstrates the use of CSS clamp() function to set responsive box widths, ensuring they scale between specified minimum and maximum values while adapting to the parent container's width.

Resize the browser window to see how width of boxes is adjusted according to viewport with the help of the clamp function.

<html>
<head>
<style>
   .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }
   .box {
      width: clamp(200px, 40%, 300px);
      height: 150px;
      margin: 20px;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
      <div class="box">Box 4</div>
   </div>
</body>
</html>
Advertisements