ClampGenerator nviewsWEB LogoClampGenerator nviewsWEB Logo

You are using "gap" clamp generator

Fluid spacing between flex or grid items, in both the row and column directions.

Input Unit
Layout Property <px>
?
Fluid Range
Viewport Unit
?
Viewport Size <px>
?
Property Size <px>
?
gap shorthand (Min & Max) controls
row <px>
?
column <px>
?
Output
Output Unit

CSS clamp Generated Code to copy!

CSS
gap: clamp(16px, calc(9.143px + 1.905vw), 32px);

Live gap CSS Clamp() Preview

Drag the slider to simulate a viewport width between 360px and 1200px. Four boxes in one 2×2 grid — the blue hatched band spans the full height between the two columns (column-gap), the orange hatched band spans the full width between the two rows (row-gap), crossing in the middle like a DevTools grid overlay. Gap can't go negative in real CSS, so both floor at 0. The green and blue frames around it are just fixed spacing for context, matching the margin/padding previews, and stay the same size at every viewport.

Simulated viewport width: 360px — 📱 Mobile (approx.)
?
📱 Mobile viewport: 360px
row-gap: 16pxcolumn-gap: 16px

Just need a plain clamp() value without picking a property? Try the simpler ClampCalculator.

What is a CSS Gap Clamp()?

The clamp() function lets the gap between flex or grid items scale fluidly between a minimum and maximum value based on the viewport size, keeping consistent rhythm across screen sizes without media queries.

Example:

gap: clamp(8px, calc(4px + 1vw), 24px);

In this example the gap never shrinks below 8px or grows past 24px, scaling smoothly in between. This tool is part of the free ClampGenerator toolkit.

Common Use Cases for Gap Clamp()

  • ✅ Card grids and image galleries with consistent, scaling spacing
  • ✅ Flexbox navigation or button groups that space out naturally on wider screens
  • ✅ Form layouts using CSS Grid, with row and column spacing tuned independently
  • ✅ Masonry-style layouts (in browsers that support display: masonry)

Gap vs Padding: When to Use Which

gap and padding both add space, but they solve different problems and aren't interchangeable:

  • gap spaces items apart from each other inside a flex or grid container — it has no effect on the space between the container and its own edge.
  • padding spaces content away from the edges of a single element — it works on any element, not just flex/grid containers.

Most layouts need both: gap to separate the cards or items inside a grid, and padding on the container (and often each card) to keep the outer edge and inner content from feeling cramped. Use the Padding Clamp Generator alongside this tool when you need both.

gap, row-gap & column-gap

Enable the shorthand controls to set independent min/max values for the row and column directions — the tool automatically collapses them into a single gap value when they match, or the two-value shorthand (row-gap column-gap) when they differ.

👉 The property selector above also lets you generate padding-inline/padding-block and margin-inline/margin-block with the same two-directional pattern.

Export as CSS Variable, SCSS, or Tailwind

The generated code isn't limited to a plain CSS declaration. Choose an output format above the code box:

  • CSS — gap: clamp(...);
  • CSS Variable — --grid-gap: clamp(...);
  • SCSS — $grid-gap: clamp(...);
  • Tailwind — 'grid-gap': 'clamp(...)', ready to paste into tailwind.config.js

Using Gap clamp() Carefully

  1. gap only works inside flex, grid, or masonry containers. Setting it on a plain block-level element has no effect — make sure display: flex or display: grid is actually set on the parent.
  2. Flexbox gap support is newer than grid gap support. Both are safe to use in virtually any project today (all major browsers since 2021), but if you're specifically targeting very old browsers, double-check flexbox gap support for that audience.
  3. gap can't go negative. Unlike margin, there's no way to make items overlap using a negative gap value — use negative margins on the items themselves for that effect.
  4. Gap doesn't add space around the outer edge of the container — only between items. Pair it with padding on the container if you also want edge spacing.

Gap Clamp Generator FAQs

How does gap clamp() help in responsive design?

It lets the spacing between flex or grid items scale fluidly between a defined minimum and maximum based on viewport size, keeping a consistent rhythm across cards, galleries, and grids without media queries.

Does gap work outside of flexbox and grid?

No — gap only has an effect inside a display: flex, display: grid, or (in newer browsers) display: masonry container. Setting it on a plain block-level element does nothing.

Is gap support the same for flexbox and grid?

gap has worked in CSS Grid since it first shipped, but support for gap in flexbox landed a bit later (all major browsers by 2021). For very old browser support specifically in a flex context, margin-based spacing is a fallback — but for virtually every project today, flexbox gap support is safe to rely on.

What's the difference between gap, row-gap, and column-gap?

gap is the shorthand for both directions at once. row-gap controls spacing between rows, column-gap controls spacing between columns — this tool generates both from one shorthand when they differ, or a single gap value when they match.

Can I export the gap clamp value as a CSS variable, SCSS, or Tailwind config?

Yes. Switch the output format above the code box to CSS Variable, SCSS, or Tailwind, and edit the name field to control the variable or config key used.

Is this gap clamp generator free to use?

Yes, it's completely free with no login required, and works offline once the page has loaded.

What's the difference between gap and padding?

gap adds space between sibling items inside a flex or grid container, and only has an effect there. padding adds space inside a single element, between its content and its own border, and works on any element regardless of display type. Most layouts use both together — gap between items, padding around each item's content.

Guides