Drum roll folks… Padding and gap controls are here!
Container elements (groups, group focii, popups, etc.) will now have padding controls on all 4 sides, accessible in the Layout tab of its property editor. Padding defines space on the interior edges of a group (whereas margins define space on the outside of an element) and shrinks the amount of “usable” space for its child elements. This option is currently only available for responsive container layout types.
In addition, Row and Column container layout types will get Gap controls. Row containers will have row-gap and column-gap inputs, whereas Column containers will have row-gap inputs available in the Layout tab of the property editor. To enable these controls, check the “Apply gap spacing between elements” checkbox and the inputs will be available. Unchecking the checkbox will return any previous value to 0.
Row gap: This value defines a consistent vertical space between “rows” of child elements. Example: Column container with 40px of row gap between 3 child shape elements.
Column gap: This value defines a consistent horizontal space between “columns” of child elements (hence why this is not available in a Column container layout).
Example: Row container with 40px of column gap between 3 child shape elements.
We hope this helps build cleaner responsive layouts, faster!