Today, if you use both a vertical and horizontal spacing system, that system is most likely based on the use of margin. This is a completely valid and correct option, but there is a better one: use the gap of flex.

Benefits of using flex

• A single container element that controls the spacing instead of multiple.
• Spacing is no longer understood as extra space to one side and is now understood as space between contiguous elements.
• Due to the above, structural asymmetries cease to exist within the DOM, where the first or last do not receive a different treatment.
• Use of fewer divs which facilitates the structural reading of our site while we work on it.
• Replicates the way of working in Figma with its Auto-Layout.

Prev

<aside> ⬅️ The Grid: global column system of only one class

</aside>

Next

<aside> ➡️ Foundational scales

</aside>

Index

• The System
  1. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Heading
        5. Color
        6. Font Size
        7. Font Style
        8. Font
        9. Bg
        10. Line Height
        11. Align
        12. Position
        13. Display
        14. Ratio
  2. Class combination
     1. Combo-classes
     2. Muti-classes
  3. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  4. Grid
  5. Gap