CSS ClampCSS ClampFluid padding, margin and gaps that scale with the screen.
The smallest and largest size, for padding, margin or font size.
The screen widths where the value starts and stops growing.
The clamped value will be between 1rem and 4rem, applied linearly between viewports of 24rem and 120rem.
Spacing that looks generous on a desktop wastes space on a phone, and spacing that fits a phone feels cramped on a large monitor. A clamp() value gives page gutters, section padding and gaps a size that fits every screen width.
The preview shows the value as the margin on both sides of a box. Set the smallest and largest size, drag the screen width and copy the result.
Three tokens cover most layouts: a page gutter, a gap and a card padding. The dashboard example shows them working together, and the Tailwind CSS clamp() guide shows how to turn them into utilities.
Use a clamp() value for padding, for example padding-inline: clamp(1rem, 0.25rem + 3.125vw, 4rem). The padding is 16px on small screens, 64px on large screens and grows smoothly in between.
Yes. clamp() works for margin, gap, row-gap, column-gap and any other property that takes a length. Using the same fluid tokens for padding and gaps keeps the rhythm of a layout consistent at every width.
Fluid spacing is spacing that scales with the screen instead of switching at breakpoints. Page gutters, section padding and grid gaps get more room on large screens and tighten up on small ones, without any media queries.
Use vw for page-level spacing like gutters and section padding. Use cqi for spacing inside components that appear in containers of different widths, like cards in a sidebar and in a main column.