Spacing

Learn about spacing, and how it is handled in the Base System

Overview

Spacing in web development is a hotly debated topic, with different systems tackling it in unique ways. Some use margin wrappers, others rely on spacing blocks, combo-classes, or custom classes.

The Base System features an innovative approach to spacing, achieved through the use of the flex-gap and repeatable spacing classes. This approach provides a highly effective and intuitive way to control spacing within your designs, offering a level of familiarity for those accustomed to Figma’s Auto Layout system or Columns and Rows in Framer.

---

What is flex gap

Flex Gap allows the parent element to control the spacing between its child elements. Instead of adding margin or using margin wrappers on individual elements, you can apply a gap directly to the parent.

---

Why should we use flex gap

We believe the flex gap spacing method provides several key advantages over traditional approaches:

1. Minimal Classes

Flex gap allows you to control the spacing of multiple child elements without needing to add any additional classes, simply set a flex a single utility class applied to the parent. This minimizes the number of classes and wrappers needed to achieve your desired layouts, making your project cleaner and easier to manage.

2. Increased Reusability

You can rearrange and reuse elements across your project without needing to adjust their margins. This makes your designs more adaptable and efficient.

3. Familiarity with Figma

The flex gap method closely mirrors how spacing is handled in Figma, where designers use Frames and Auto Layout to apply gap spacing. In the Base System:

• Columns act as frames.

• Spacing is applied as a gap through the class name.

This intuitive approach makes it easier for designers familiar with Figma to transition seamlessly into Webflow.

4. Intuitive Structure

Flex gap promotes a clear hierarchy in your project by grouping related elements within parent containers. This not only simplifies understanding when viewing the layers panel but also helps ensure paired and related items are visually and structurally grouped together.

5. No Deep Combo Stacking

The flex gap method eliminates the need for deep or complex combo-classes. This makes it user-friendly for beginners while remaining flexible and efficient for advanced users.

How to use flex gap

The Base System provides a straightforward approach to using flex gap:

1. No Utility Wrappers Needed You can apply gap spacing directly to any class. There’s no need to add extra spacing wrappers.

2. Centralized Control via Variables Spacing is managed using variables, offering a single source of truth to adjust spacing across your entire project. Updates to the variable instantly propagate across all instances where it’s used.

3. Prebuilt Column and Row Utility Classes The Base System includes Column and Row utility classes for each gap size, allowing you to quickly create vertical or horizontal spacing without needing to define new custom classes.

   Examples:

   • Column Regular (vertical spacing between elements in a column)

   • Row Small (horizontal spacing between elements in a row)

---

Utility Classes

The Base System provides spacing utility classes called Columns and Rows. These classes use flex gap that wrap around the elements requiring spacing. For instance, if you want to space an H1 heading and a paragraph 16px apart, you can wrap both elements within a single <div-block> and apply the spacer class Column Regular. Columns and rows are essential tools for managing spacing in layouts without the need for excessive class creation. Whenever possible, apply spacing directly to the parent element to reduce the number of unnecessary div wrappers. Thanks to gap variables, you can apply consistent spacing to any element while retaining full control over the spacing values.

What element to use

Spacing elements in the Base System are applied using a <div-block> that wraps around the elements requiring spacing. We don't use the V Flex and H Flex elements, which have pre-applied flex settings that may cause issues if you want to change one of these element to no longer use flex. Although CSS grid is an optional layout for users, it can be considered overkill for one-dimensional (1D) layouts. Webflow grids also impact performance.

---

Columns

Class Name	Flex Gap
Column 2X Large	40px / 2.5rem
Column X Large	32px / 2rem
Column Large	24px / 1.5rem
Column Regular	16px / 1rem
Column Small	12px / 0.75rem
Column X Small	8px / 0.5rem
Column 2X Small	4px / 0.25rem
{Custom} Column	X

How to use columns

The base system includes combo classes that provide flexibility for adjusting column and row layouts. For example, applying the "Column Center" class to a "Column Small" will center its content.

When working with combo classes, consider the specific needs of your layout and evaluate whether a custom class might provide a cleaner and more maintainable solution.

---

Row Classes

By default, rows are set to "flex-center" alignment because this default meets the majority of use cases. Reducing the need for additional adjustments in most scenarios.

Name	Flex Gap
Row 2X Large	40px / 2.5rem
Row X Large	32px / 2rem
Row Large	24px / 1.5rem
Row Regular	16px / 1rem
Row Small	12px / 0.75rem
Row X Small	8px / 0.5rem
Row 2X Small	4px / 0.25rem
{Custom} Row	X

How to use Rows

From our experience, columns are used more frequently than rows. Rows present additional challenges, especially at specific breakpoints where wrapping is necessary. Attempting to manage wrapping behavior using combo classes can increase complexity and lead to confusion. In such cases, it is often more efficient to create a new custom class. You can easily duplicate an existing class ("Ctrl + Alt + D") and adjust it to create a custom spacing class tailored to your needs, such as "Testimonial Column Small" or "Pricing Feature Row."

---