CLAMP Use

CSS is a language used to style websites. It helps make them look pretty and organized. One of the things you can do with CSS is to adjust the size of text and images to fit your screen size. But sometimes we want to make sure our text or images don't get too small or too large. That's where clamp comes in!

What is clamp?

Clamp is a CSS function that allows you to set a minimum and maximum value for a property. It is especially useful when you want to set the size of a font or an element based on the screen size.

How to use clamp?

The clamp() function accepts three parameters:

The minimum value allowed for the property

The preferred value for the property

The maximum value allowed for the property

Here's an example of how to use clamp to set the font size of a paragraph:


p {
   font-size: clamp(16px, 4vw, 24px);
}

In this example, the font size of the paragraph will be set to a minimum of 16 pixels, a maximum of 24 pixels, and a preferred size of 4% of the viewport width.

Best Use Cases

Responsive typography

Scaling images based on screen size

Setting element width or height based on screen size

Code Snippets

Here's an example of how to use clamp to set the width of an element:


div {
   width: clamp(200px, 50%, 500px);
}

In this example, the width of the div will be set to a minimum of 200 pixels, a maximum of 500 pixels, and a preferred width of 50% of its parent element.

Sources

CSS Tricks

MDN Web Docs

How to use clamp for responsive websites?

Using clamp, you can set the size of a font or an element based on the screen size. This makes it a great tool for creating responsive websites. Here's an example of how to use clamp to create a responsive font size:


h1 {
  font-size: clamp(3rem, 5vw, 5rem);
}

In this example, the font size of the h1 element will be set to a minimum of 3rem, a maximum of 5rem, and a preferred size of 5% of the viewport width.

10 Use Cases for Clamp

Setting font size based on screen size


p {
  font-size: clamp(16px, 4vw, 24px);
}

Scaling images based on screen size


img {
  width: clamp(200px, 50%, 500px);
}

Setting element width or height based on screen size


div {
  width: clamp(200px, 50%, 500px);
  height: clamp(200px, 50%, 500px);
}

Creating responsive text boxes


textarea {
  width: clamp(200px, 50%, 500px);
  height: clamp(200px, 50%, 500px);
}

Limiting the width of a paragraph


p {
  max-width: clamp(200px, 50%, 500px);
}

Creating responsive buttons


button {
  padding: clamp(10px, 2vw, 20px) clamp(20px, 5vw, 40px);
}

Setting the height of a video player


video {
  height: clamp(200px, 50%, 500px);
}

Creating responsive navigation menus


nav {
  width: clamp(200px, 50%, 500px);
}

Setting the width of a table


table {
  width: clamp(200px, 50%, 500px);
}

Creating responsive images


img {
  width: clamp(200px, 50%, 500px);
  height: clamp(200px, 50%, 500px);
}

Code Snippets

Here's an example of how to use clamp to set the width of an element:


div {
   width: clamp(200px, 50%, 500px);
}

In this example, the width of the div will be set to a minimum of 200 pixels, a maximum of 500 pixels, and a preferred width of 50% of its parent element.

Sources

CSS Tricks

MDN Web Docs