Fluid Gaps With Clamp for Elementor

What Are Fluid Gaps In Elementor?

When using Flexbox or Grid Containers, all elements and containers have gaps that gives us spacing. By default, they are set to 20px in Elementor’s Site Settings. We can change the default and I always recommend to do so using REM values for best accessibility practices. And then we can change the gap values for each individual container.

The ‘Fluid Gaps’ is a different method using ‘Clamp’ value that clamp the size of the gaps from desktop to mobile so they adjust smoothly based on the screen size. They do not require to be adjusted for tablet and mobile view.

Make sure to watch the video at the end of this post to learn more and better understand how the clamps and CSS work.

CSS Snippet (Beginner Friendly)

This CSS snippet will look different from the one shown in the video tutorial below. I decided to add 2 options, one that is beginner friendly without the Calc, and another option with the Calc for experienced web creators who are more comfortable with CSS.

Both are 100% good to go as they are and will deliver the same results.

:root {
    /* Global Gap Variables - Editable */
    --gap-xxs: clamp(0.25rem, 1vw, 0.5rem);   /* 4px → 8px */
  --gap-xs:  clamp(0.5rem, 1.5vw, 0.75rem); /* 8px → 12px */
  --gap-s:   clamp(0.75rem, 2vw, 1rem);     /* 12px → 16px */
  --gap-m:   1.25rem;                       /* same as the default gaps fixed at 20px */
  --gap-l:   clamp(1.25rem, 3vw, 2.5rem);   /* 20px → 40px */
  --gap-xl:  clamp(1.25rem, 5vw, 3.75rem);  /* 20px → 60px */
  --gap-xxl: clamp(1.25rem, 10vw, 7.5rem);  /* 20px → 120px */
}

/* gap classes */
.gap-xxs {
    gap: var(--gap-xxs);
}

.gap-xxs .e-con-inner {
    gap: var(--gap-xxs);
}

.gap-xs {
    gap: var(--gap-xs);
}

.gap-xs .e-con-inner {
    gap: var(--gap-xs);
}

.gap-s {
    gap: var(--gap-s);
}

.gap-s .e-con-inner {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}

.gap-m .e-con-inner {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}

.gap-l .e-con-inner {
    gap: var(--gap-l);
}

.gap-xl {
    gap: var(--gap-xl);
}

.gap-xl .e-con-inner {
    gap: var(--gap-xl);
}

.gap-xxl {
    gap: var(--gap-xxl);
}

.gap-xxl .e-con-inner {
    gap: var(--gap-xxl);
}

CSS Snippet (Advanced with Calc)

:root {
    /* Global Gap Variables - Editable */
    --gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem); /* 4px mobile, 8px desktop*/
    --gap-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem); /* 8px mobile, 12px desktop*/
    --gap-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem); /* 12px mobile, 16px desktop*/
    --gap-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem); /* 20px mobile, 20px desktop*/
    --gap-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem); /* 20px mobile, 40px desktop*/
    --gap-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem); /* 20px mobile, 60px desktop*/
    --gap-xxl: clamp(1.25rem, calc(11.36vw + -1.59rem), 7.5rem); /* 20px mobile, 120px desktop*/
}

/* gap classes */
.gap-xxs {
    gap: var(--gap-xxs);
}

.gap-xxs .e-con-inner {
    gap: var(--gap-xxs);
}

.gap-xs {
    gap: var(--gap-xs);
}

.gap-xs .e-con-inner {
    gap: var(--gap-xs);
}

.gap-s {
    gap: var(--gap-s);
}

.gap-s .e-con-inner {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}

.gap-m .e-con-inner {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}

.gap-l .e-con-inner {
    gap: var(--gap-l);
}

.gap-xl {
    gap: var(--gap-xl);
}

.gap-xl .e-con-inner {
    gap: var(--gap-xl);
}

.gap-xxl {
    gap: var(--gap-xxl);
}

.gap-xxl .e-con-inner {
    gap: var(--gap-xxl);
}

Video Tutorial On How To Use Fluid Gaps

Make sure to watch the tut and follow along. And don’t forget the good YouTube stuff. If you found value in this make sure to give a like and let us know how it’s working for you in the comments!