Flex / Row Gap
The gap property in CSS defines the space between items in a Flexbox or Grid layout. It is a shorthand for setting row and column spacing between child elements.
Key Points:
Works in both Flex and Grid layouts.
Removes the need for setting margins manually between items.
gap= sets both row and column gaps.row-gapandcolumn-gapcan be used individually.
Flex / Row Gap in Workmaster
In Workmaster, the Flex / Row Gap feature mirrors the functionality of CSS gap, allowing users to define spacing between widgets either horizontally (columns) or vertically (rows).
This setting becomes available once Flex or Grid is enabled in the Display section.
Possible Values
Any number
px
A fixed, absolute size.
Any number
rem
Relative to the root element’s font size (usually 16px by default).
Any number
%
Relative to the parent element’s size (width, height, etc.).
Any number
vw
Relative to the width of the viewport.
Any number
vh
Relative to the height of the viewport.
No number required
auto
Automatically adjusts based on content or context.
No number required
unset
Resets the property to its initial or inherited value
Examples
Initial Layout with Multiple Widgets
Consider a Block Container with Display and Flex Wrap properties set to Flex and Wrap respectively.
1. Row
2. Column
3. Row & Column (Both)
Last updated