layouts
CSS Grid Generator
Visually build CSS grid layouts and export production-ready code.
#grid#layout#responsive
Built-in toolFree · No signup
Fluid clamp() Calculator
Pick a min and max value, a min and max viewport width, and any CSS property — font-size, padding, gap, margin, width, height, and more — and get a single clamp() declaration that scales smoothly between breakpoints with zero media queries. Drag the viewport slider to preview the computed value at any width before you ship it.
Share:
Min
Max
Min viewport
Max viewport
The value scales linearly between these two viewport widths, and stays clamped flat outside them.
Fluid Text
Drag the slider above to simulate different viewport widths.
How to use
01
Choose a property
font-size, padding, gap, margin, width, height, line-height, border-radius, or letter-spacing.
02
Set the value range
The smallest and largest values you want, in pixels.
03
Set the viewport range
The screen widths between which the value should scale fluidly.
04
Preview & copy
Drag the viewport slider to check the computed value, then copy the clamp() declaration.
More CSS layout tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.