Today, the platforms we have to support span far and wide. Thus, the applications we build need to be able properly to support what seems like an endless amount of viewing options. Long gone are the days of building a simple website and users having to deal with scrollbars to view things. Users demand more, and we’re expected to provide that. One way engineers can do that, is by using clamp.
Clamp is a cool CSS property that allows for dynamic sizing. It takes in three parameters as values: minimum, preferred, and maximum. Putting that into context, let’s say our preferred value is a percentage. 20% to be exact. So that is like setting a static value, similar to what you’re used to doing. Now let’s say we set the minimum to 100px and the maximum to 500px. Doing this bounds the value to never go lower, or higher, than those two values. Awesome right!
Let’s look at some code.
.text {
/* The font-size will dynamicly be within 1rem and 4rem */
font-size: clamp(1rem, 2vw, 4rem);
}
.element {
/* The width here will dynamically grow between 100px and 500px */
width: clamp(100px, 30%, 500px);
}