Column Gaps

Style Kits / Docs / Legacy features / Column Gaps

The latest version of Style Kits works best with flexbox containers, and there is a dedicated panel for managing container spacing. However, if you are still using Sections and Column Gaps at your site, the settings below will still be useful.

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.

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.

You will not find controls for the "No Gap" preset here, because the value for "No gap" always corresponds to 0px.

Last updated on December 16, 2022

Search docs

In this category

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy