<aside> ℹ️ Grouping allows you to combine different content into single units of meaning. This adds logic to the design and makes reading or scanning content consistent and coherent.
</aside>
If the objects are close to each other, they appear to be a single whole, something that is united by a common meaning. Elements separated by distance become distinct objects with different meanings.
Objects that are closer to each other are perceived as one whole, and the farther the objects are, the more they are separated.
Text too separated from the heading and image becomes a detached block and seems to have no relation to them. If the distances between the elements are equal or close, each element is close to the other: the image, heading, and text become one unit.
Left: The text seems separate from the heading and image. Right: Now, the image, heading, and text have unified meaning.
The title of module group works better if it's close to the modules themselves. If it is too separate, it is perceived as alien and standalone.
Left: The heading is detached from the modules. Right: The heading is close to the modules and is now linked to them.
The background, border, and shape help to unite different objects into a single whole. In this way, there is a single meaning and a single connection between the modules.
Elements united by a background or a border become a nested and unified.
In this case grouping by decorative means works stronger than proximity. Even the title of the modules strongly separated from them will still be perceived as part of these blocks.