Responsive web design has been around for a while. It's constantly evolving and providing its authors to stay DRY and dynamic. CSS offers many functions for calculating widths within CSS. Most underutilized CSS functions are min(), max(), minmax() and clamp().
To use CSS min(), max(), minmax(), we have to specify at least 2 values in the function. For the clamp function, we have to pass exactly 3 values. Min min function will select minimum from the given values. Max function will select the maximum of the given values. Minmax will select a value range greater than or equal to min and less than or equal to max. The clamp will select an intermediate value between the min and max range.
To put it in simple terms:
- Min() is like getting the lowest score in a test.
- Max() is like getting the highest score in a test.
- Clamp() is like getting a score somewhere in the middle of the two extremes.
min(), max(), clamp() functions can be used to create responsive layouts as well as responsive fonts, the minmax() function is used for setting up values for the grid templates. Let's understand these CSS min max clamp functions with examples.
The CSS min() function:
It calculates and applies the smallest value from the specified value range. The inversion of min in this application is max, which sets the minimum value for all things. A sometimes confusing point with min and max is that when you use max to have a minimum value on a property such as min-width and then use max instead of min because min imposes a maximum value, it is easy to get the opposite function when you try to use min to add a minimum size.
If you see the example below, You'd find a solution to a real-world problem when you have a static size ad on the sidebar and you want it visible most of the time. You can do that using max-width property or by using the min function.
Syntax:
property: min(value1, value2, value3);
- min function will take any valid length as an argument.
Observe the sidebar in the example. It will take the minimum value from 300px and 100%. It will take the smallest value available to the property. In this case, it's width. Media query can be used to change min values of the element.
The CSS max() function:
It is calculated by applying the largest value to the specified range of values. The max () function contains one or more comma-separated values and represents the greater value of each of these calculations. You can also use different units of value in your expression, or different units for the mathematical functions that make up the arguments.
Syntax:
property: max(value1,value2,value3);
- max function will take any valid length as an argument.
We'll use the same example but this time, instead of min we'll use the max for the sidebar.
Observe the sidebar. The layout size shrinks to full width to 200px. But we're using the max function in the example. So the sidebar will take 300px as a max when the layout goes below 300px. This can be seen when the layout shrinks. We can also use a media query to add breakpoints and use max function.
The CSS clamp() function:
It can be used for length, frequency, angle, time, percentage or any number of integers allowed. The clamp function takes three comma-separated expressions as parameters, in order of minimum, preferred, and maximum value.
Mathematical CSS functions use most of the properties that allow numerical values. There are four supported mathematical functions in CSS that can be used in unexpected ways, such as gradients, colors, functions, or in combination with custom CSS properties.
These functions bring native CSS to a simpler format. For example: while setting width property, the max() function behaves like setting values for width and min-width properties, min() function behaves like setting values for max-width and width properties individually. It saves line for code for width property but all the properties don't have the min and max ranges.
Syntax:
property: clamp(minimum, preferred, maximum);
- clamp function will take any valid length as an argument.
For the creation of responsive fonts, it could be difficult to get a variety of fonts using relative units. clamp() function can just solve that problem to some extent. We can clamp viewport units vw and vh using the clamp function to get perfect responsive fonts.
Observe the following example. See how the font size stays responsive even after scaling the viewport? That is because the font size is locked between the minimum and maximum size.
The CSS minmax() function:
It can be used to specify values from minimum to maximum to specify the width and height of a CSS grid column or row. It opens the door for us to write more powerful and concise CSS by allowing us to set values in the grid that follow the function, including minimum and maximum values.
We can use various types of values for the Minmax () function and it all depends on what kind of custom grid we want to create. We can use it for the values of the grid template columns and grid template row properties.
Syntax:
grid-template-columns: minmax(min, max)
- Length
- Percentage
- Flexible Length
- max-content
- min-content
- auto
Minmax property only works with grid systems. Unlike min, max and clamp it does not work with other properties. This function can really be helpful in case you're using grid systems to define your layouts.
We'll use the same example as MDN. We'll tweak this example to see it's shrinking and growing. Click on the radio buttons to try the different grid column structures in the example.
Observe: We have defined 3 columns for the demo. The first element has a bit more content than others.
The first option will make the first column vary between 20px and auto.
The second option will make it vary between 0px and 1fragment.
The third option allows the column to vary between 2 to 10 character width.
The fourth and fifth options are using special keywords so they have different behavior depending on their usage.
If these width units don't make sense then let's explore what values can we have for min and max arguments.
- Length: It accepts a valid length value.
- Percentage: It accepts valid percentage values as min or max.
- Flexible Length: It accepts a valid number unit with fr unit. The fr unit represents a fraction of the free space in the grid container.
- max-content: This keyword represents the cell's ideal size. This is the smallest possible size the cell can be, while still fitting around its contents unobtrusively.
- min-content: This keyword represents the smallest possible size the cell can be, which does not lead to an overflow unless that overflow is unavoidable.
- auto: This keyword can take different values depending on if it is used as the maximum or minimum value in the minmax() function. If used as a max, it is equivalent to the max-content value. If used as a min, it represents the largest minimum size the cell can be.
What are the benefits of using CSS min max and clamp?
When it comes to web development, one of the most important aspects is CSS. These properties allow you to set the minimum, maximum and clamped values for a given element. This can be extremely useful in a variety of situations, such as ensuring that an element is always visible or preventing it from becoming too small or large.
Overall, the benefits of using min, max and clamp in CSS are numerous. If you're not already using these properties in your web development projects, you should definitely consider doing so - you'll be glad you did!
What are the limitations of CSS min max and clamp?
The limitations of CSS min max and clamp is these properties only work on linear scale values. Additionally, they can be tricky to use with percentage values. And finally, browser support is still somewhat limited.
Using Min Max Clamps With Media Queries
When it comes to responsive design, min and max clamps can be extremely useful. By setting a minimum and maximum width for your elements, you can ensure that they always stay within a certain size range. This can be especially helpful when using media queries to make your site more responsive.
min and max clamps can be applied to almost any element on your page. For example, you could use them to set the width of your content area or the height of your sidebar. By doing this, you can make sure that your content always looks its best, no matter what device it’s being viewed on.
If you’re not sure how to use min and max clamps, don’t worry – they're actually quite easy to use once you start using them.
So How good are min, max, and clamp functions are?
If you have imagined a responsive layout without media-queries, well using the clamp function you can achieve it at some levels. You can experiment with these functions for your next project. They are like a magic trick. It could reduce much code in your CSS. minimax function on the other hand can give you more control over your grid system to build complex layouts. There are tons of enhancements that you can do with your content depending on its height or width. UI designers can optimize their typography and components using this simple trick because device size matters.
