CSS ClampCSS ClampFluid grid and flexbox gaps that grow 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 0.75rem and 2rem, applied linearly between viewports of 24rem and 120rem.
Gutters that look right on a desktop waste space on a phone, and gutters sized for a phone make a desktop layout feel cramped. The preview applies the clamp() value as the gap of a three-column grid, so you can see the spacing change as you drag the screen width.
From 12px to 32px between 384px and 1920px, the value is clamp(0.75rem, 0.438rem + 1.302vw, 2rem). Use it as gap, row-gap or column-gap on any grid or flex container.
--layout-gap and reuse it for grids, stacks and flex rows.vw for cqi. See the container query units guide.The dashboard example combines a fluid gap with fluid page gutters and card padding. For padding and margin, use the spacing generator.
Yes. gap, row-gap and column-gap accept any length, including clamp(). It works for CSS grid and for flexbox in every current browser.
Use a clamp() with a vw part. Percentages in gap resolve against the container and behave differently for rows and columns, while a clamp() gives you a predictable minimum and maximum in rem.
Yes. Set row-gap and column-gap separately, or write gap with two values: gap: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(0.75rem, 0.438rem + 1.302vw, 2rem). The first value is the row gap.
Use the same fluid token, or a fixed ratio between them, for the page gutter, the grid gap and the card padding. The layout then keeps the same rhythm at every width. The dashboard example shows this with three tokens.