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

**URL:** <https://discuss.liferay.com/t/fragment-container-add-gap-configuration-and-responsive-behaviour/169>\
**Category:** Product Ideas\
**Tags:** future-development, fragments\
**Created:** [November 25, 2025, 3:49pm UTC](https://discuss.liferay.com/t/fragment-container-add-gap-configuration-and-responsive-behaviour/169 "2025-11-25T15:49:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ldetomi](https://avatars.discourse-cdn.com/v4/letter/l/a6a055/32.png) [@ldetomi](https://discuss.liferay.com/u/ldetomi)\
**Post date:** [November 25, 2025, 3:49pm UTC](https://discuss.liferay.com/t/fragment-container-add-gap-configuration-and-responsive-behaviour/169/1 "2025-11-25T15:49:24Z")

</div>

**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

---

<div class="post-metadata">

**Author:** ![Priyank\_Gajera](https://dub1.discourse-cdn.com/flex014/user_avatar/discuss.liferay.com/priyank_gajera/32/339_2.png) [@Priyank\_Gajera](https://discuss.liferay.com/u/Priyank_Gajera)\
**Post date:** [November 25, 2025, 11:26pm UTC](https://discuss.liferay.com/t/fragment-container-add-gap-configuration-and-responsive-behaviour/169/2 "2025-11-25T23:26:57Z")

</div>

### 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**.

* * *

### 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).

 ![Screenshot 2025-11-25 at 6.25.56 PM](https://europe1.discourse-cdn.com/flex014/uploads/liferay/original/1X/921da511d61cb6a895650e115d8e047bcc413db6.png)

 ![Screenshot 2025-11-25 at 6.25.19 PM](https://europe1.discourse-cdn.com/flex014/uploads/liferay/original/1X/c5fa7d9b1f2b1d2cdd82f0807a8cdf56c9198ba0.png)

---

<div class="post-metadata">

**Author:** ![Javier\_Burgueno](https://dub1.discourse-cdn.com/flex014/user_avatar/discuss.liferay.com/javier_burgueno/32/421_2.png) [@Javier\_Burgueno](https://discuss.liferay.com/u/Javier_Burgueno)\
**Post date:** [June 1, 2026, 9:49am UTC](https://discuss.liferay.com/t/fragment-container-add-gap-configuration-and-responsive-behaviour/169/3 "2026-06-01T09:49:37Z")

</div>

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](https://liferay.atlassian.net/browse/LPD-91045)**