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-gap and column-gap can 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.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

Possible Values

Value	Units	Description
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)