How to Use CSS Math Functions in Practice

The calc() Function in CSS

CSS syntax: calc(expression)
The calc() method takes a single expression as an input and returns the result of that expression as the value. For adaptive layout experiences, the function calculates the dynamic width and height of the container.
We use the calc function when we have to arrange the elements in a specific value.
Let’s suppose we have three-element side by side and we want it a single row with a 20px gap in each element and obviously, it is responsive.

.calc-flex{ 
		display:flex; 
		width:600px; 
		height: 200px; 
		justify-content: space-between; 
		} 
		.calc-flex div{ 
		background:#d367c1;
		max-width:calc(100/3 - 20px); 
		width:100%; 
		} 
		<div class="calc-flex"> 
		<div class="item1"></div> 
		<div class="item2"></div> 
		<div class="item3"></div> 
		</div>

The min() Function in CSS

CSS syntax: min(value1, value2, …)
When using the min() function, the smallest acceptable value is specified. It accepts Two different specifications that are separated by a comma and support arithmetic expressions.
In the below example, Despite our container having a maximum width of 1000px, the div element inside our container cannot exceed 500px in width.

.min-check{ 
		width: 100%; 
		max-width: 1000px; 
		margin: 50px auto;
		justify-content: space-between; 
		} 
		.min-check div{ 
		background:#d367c1; 
		width: min(50%, 500px); 
		} 
		<div class="min-check"> 
		<div class="item1"></div> 
		</div>

The max() Function in CSS

CSS syntax: max(value1, value2, …)
A max() function represents the largest value of one or more comma-separated calculations. We can use max() to set a minimum value for a variable.
When using responsive margins, the max() feature comes in handy.

.max-check{ 
		width: 100%; 
		max-width: 1000px; 
		margin: 50px auto; 
		justify-content: space-between; 
		}

		.min-check div{ 
		background:#d367c1; 
		width: max(50%, 300px); 
		} 
		<div class="max-check"> 
		<div class="item1"></div> 
		</div>

The container respects the width: 100%; however, it does not go below the stated 300px mark because it is the container’s greatest value.

The clamp() Function in CSS

CSS syntax: clamp(value1, value2, value3)
The clamp() function accepts three comma-separated expressions in the order of lowest value, preferred value, and maximum value as inputs.
Clamp() is most typically used to produce the effect of fluid typography by setting a range of allowable values for typography.
clamp() results of combining the min() and max() functions.

.item { 
		width: clamp(300px, 50%, 1000px); 
		/* Is equivalent to */ 
		width: max(300px, min(50%, 1000px)); 
		}

The CSS Math Functions in Practice is one of the most powerful tools in the toolbox for web designers. It allows you to do more than just a simple “+” or “-” to values and is able to do far more complex calculations. In this article, I’ll be going over how to use the calc function, as well as its sibling’s clamp, min, and max.

================================================================================================================================================

Reference link:https://developer.mozilla.org/en-US/docs/Web/CSS/calc