How can I add spacing between the columns in the 'What We Offer' section on Webflow?

Published on
September 22, 2023

To add spacing between the columns in the 'What We Offer' section on Webflow, you can follow these steps:

  1. Select the element that contains the column layout. Typically, this will be a div block or a section.
  2. In the Style panel, navigate to the 'Layout' section.
  3. Under the 'Display' property, choose either 'Grid' or 'Flexbox' depending on the layout you are using for your columns.
  4. Adjust the 'Gap' property. This property allows you to control the spacing between the columns.
  5. Increase or decrease the value of the 'Gap' property to create the desired spacing. The unit of measurement can be in pixels (px), percentages (%), or other supported units.

Here's an example of how to add spacing between columns using the 'Grid' layout:

  1. Select the element that contains the column layout.
  2. In the Style panel, navigate to the 'Layout' section.
  3. Under the 'Display' property, choose 'Grid' from the dropdown menu.
  4. Locate the 'Grid' property and click on the 'Auto' icon next to 'Columns' to create a new grid area for each column.
  5. Adjust the 'Gap' property by increasing or decreasing the value to add spacing between the columns.

Here's an example of how to add spacing between columns using the 'Flexbox' layout:

  1. Select the element that contains the column layout.
  2. In the Style panel, navigate to the 'Layout' section.
  3. Under the 'Display' property, choose 'Flex' from the dropdown menu.
  4. Locate the 'Flex Children' property and click on the 'Auto' icon next to 'Columns' to create a new flex area for each column.
  5. Adjust the 'Gap' property by increasing or decreasing the value to add spacing between the columns.

By following these steps, you can easily add spacing between the columns in the 'What We Offer' section on Webflow.