Fluid gap system ব্যবহার করে responsive spacing তৈরি করলে আপনার layout সব screen-এ balanced থাকে।
Problem
Fixed gap responsive না হওয়ায় layout break হয়।
Solution
Clamp ব্যবহার করে fluid gap তৈরি করুন।
Fluid Gaps কীভাবে কাজ করে?
Minimum value
Preferred value
Maximum value
gap: clamp(0.5rem, 2vw, 1rem)
Gap Class Structure
| Class Name | Use Case | Gap Range |
|---|---|---|
| gap-xxs | Ultra tight spacing | 4px → 8px |
| gap-xs | Very small gaps | 8px → 12px |
| gap-s | Small spacing | 12px → 16px |
| gap-m | Default Elementor gap | 20px (fixed) |
| gap-l | Large spacing | 20px → 40px |
| gap-xl | Extra large spacing | 20px → 60px |
| gap-xxl | Huge section spacing | 20px → 120px |
Comparison
Fixed
Fluid
Strategy
Clamp system global CSS হিসেবে ব্যবহার করলে পুরো site consistent থাকবে।
Required Plugin
এই code ব্যবহার করতে FluentSnippets plugin ব্যবহার করুন।
👉 Download Plugin
: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);
}