Fragment "container": add 'gap' configuration and responsive behaviour

[ldetomi]

What is the problem you are trying to solve?

“Container” fragment can be configured as a “flex row” (or “flex column”). Actually Liferay allows to set corresponding css properties such as “align-items”, “justify-content”, “flex-wrap” but not “GAP” one.

This is a very useful (and sometimes lifesaver) feature to space items and is surely better than adding margins on each children element.

In addition, very often is common to use “flex-row” in desktop breakpoint but “flex-column” in mobile one. Actually is not possible to change behaviour between breakpoints, ad allowed for other properties such as color, margins, etc.

What is your project about? (e. g. Intranet, Partner Portal, Enterprise Website, etc)

Every website

What is your proposed solution? (optional)

As described above:

1. Add “gap” configuration field when a “flex” behaviour is selected for “Container fragment”

2. Add ability to change behaviour between breakpoint such other properties like text color and margins

[Priyank_Gajera]

1. Gap Configuration Alternative

• Current Limitation: Direct configuration for a gap property is not available.

• Alternative Solution: Use the “Advanced tabs” feature.

• Implementation: Apply the Clay utility class c-gap-2 (or any c-gap-* variation) via the cssClasses field.

• Benefit: Leveraging c-gap-* classes avoids the need to write custom CSS.

  

  Ref: C Spacing Utilities - Clay by Liferay

---

2. Breakpoint-Specific Styling

• Ability to Change Behavior: You can already modify properties like text color and margins for an element based on the viewing breakpoint (e.g., desktop, tablet, mobile).

[Javier_Burgueno]

Thanks for the feedback @ldetomi. We like the first part of your proposal. Adding a “gap” field for Flex Containers is a great quick-win that will improve layout creation. We are planning to prioritize this specific feature soon. Regarding the second part (changing behavior/gap per viewport), it is more complex and requires a deeper UX/technical analysis. For now, we will focus on the general gap configuration and leave the responsive behavior for a broader future initiative.

Jira