# Grouping and Rectangles *Skill Level: Intermediate* ## Before You Begin * Make sure you understand the [definitions and terms](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/designing-your-app/definitions-and-terms). * Make sure you have read through the previous guides, especially how to access the [Layout](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/designing-your-app/using-the-layout-tab) tab and the [Shared Layout Settings](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/designing-your-app/using-the-layout-tab/shared-layout-settings) and [Custom Layout Settings](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/designing-your-app/using-the-layout-tab/custom-layout-settings). * Make sure you understand the [Component Tree](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/definitions-and-terms#component-tree) and [Parent and Child Components](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/definitions-and-terms#parent-and-child-components). ## Video {% embed url="" %} ## Walkthrough #### There are a few principles to understand when using rectangles, images, & ellipses: 1. When you place a rectangle, image, or ellipses on a screen, it acts as a sort of container for other things. You can drag and drop other components into it to create an auto-group. 2. You can access the components inside the "container" by double-clicking on the component you want to select. Note that you can also have nested rectangles, i.e. rectangles inside of rectangles. 3. Components within a rectangle will scale with the rectangle automatically, unless the component scaling is set to **Stays Fixed**. 4. The yellow bounding box of a rectangle extends only to the edges of the rectangle. 5. In order for a component to be considered "inside" the rectangle, the component's yellow borders must be fully inside the rectangle's borders. 6. Rectangles do not appear in the component tree as a group, but can be opened up like a group can within the component tree to add or remove components. 7. Because rectangles are not technically considered groups, the components inside them do not have the option to **Scale with Group**, however **Scales with Screen** does ensure that the components scale as their parent rectangle Scales. {% hint style="info" %} **NOTE**: You cannot ungroup rectangles. If you need to remove components from a rectangle, you can do so using the Component Tree. {% endhint %} ### Groups #### There are a few principles to understand when using rectangles: 1. You can turn anything into a group, even a single component, another group, or a rectangle with components inside it. 2. The yellow bounding box of a group extends out to include any component within that group, regardless of their location on screen. Group bounding boxes can be quite large if components within the group are positioned far apart. 3. When a component is added to a group, the group's yellow border extends to include the newly added component. 4. Groups are useful for applying layout constraints to several components or groups that need to maintain not just their own scaling, anchoring, and positioning, but also the components' settings relative to one another. Notice in the animation below, that the pricing cards tend to get closer and farther apart as the screen scales. When the pricing card rectangles are placed into a group, however, the spacing between them stays the same as the screen scales.

Click the animation to enlarge it.

### When Should I Use Groups vs. Rectangles? This is an excellent question, however it's not really an either/or answer because both groups and rectangles serve unique purposes, despite having similar functions. Here's some criteria to help you determine which to use. * Use rectangles if you need to create tiles, containers, or cards for similar information to live in - even if the rectangles are invisible or the same color as the screen background. * Use rectangles to provide boundaries for the information you want to display. See the article on [Responsive Design Best Practices](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design/designing-your-app/responsive-design-best-practices) for more insight. * Use groups if you need to control the scaling, anchoring, or custom positioning of multiple rectangles or components at a time. * Group components together that need to be Anchored Center, Stays Fixed, but tend to drift apart. When the screen width increases. This helps these components maintain their anchoring, individual scaling, AND the scaling relative to one another. ## Learn More * Be sure to check out the [Design](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/design) section to learn more about designing screens in Adalo. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests)