Skip to main content
Dublin Library

The Publishing Project

Using clamp() to constraint a container width

 

Reading min(), max(), and clamp(): three logical CSS functions to use today presented an interesting case for using clamp(): Controlling the width of a text-container.

In typography books, we're told that text should be between 45 and 75 characters wide. Until I saw the example, I hadn't thought about using clamp in combination with the ch length unit to express this requirement.

In the following code snippet, we tell the browser that we want the width of the article to be 50% of the screen width but no smaller than 45ch or larger than 75ch, regardless of the viewport size.

article {
  width: clamp(45ch, 50%, 75ch);
}

Edit on Github