Working with Column Gaps

Column Gaps is a control that is available in every Section, and what it actually does is to add padding inside the columns that the sections contain. 

Elementor offers a scale of six column gap presets:

1. Default
2. No Gap
3. Narrow
4. Extended
5. Wide
6. Wider

You can apply any of the above Column gaps to your section, by tweaking the Column Gap control in the Layout panel of your Section.

The problem with Current setup

As per current Elementor version (2.6.5) there is no way to edit the default elementor gap values. These values are hard-coded into Elementor and are the following:

• Default: 10px;
• No-Gap: 0px;
• Narrow: 5px;
• Extended: 15px;
• Wide: 20px;
• Wider: 30px;

Note that on top of that, there is no way to have control over the responsive values for these column gap presets. This makes Column Gap controls practically unusable, so most of the users end up manually adding padding to their columns, which is not the best practice.

Controlling the Column Gap with Style Kits

Maintaining control over the column gap presets is essential for consistent spacing across your layouts. Instead of adding padding manually to your columns, how about you assign one of the available Column gap presets to your sections? but we first need a place to define the padding values for those column gaps presets.

In the Style Kits sidebar, go to the Column Gaps panel. There you will find a set of padding controls that correspond to the Column Gap presets. You now have a way to control the Column gap in px, em or % values, for every viewport breakpoint.