# Group

> Learn how to use the Group component in PandaSuite to manage interactivity, animations, and responsive design by grouping objects and creating dynamic content.

https://docs.pandasuite.com/essentials/components/group/

**Bring objects together with the Group to create the same interactivity, create an animation or manage responsive design.**

Instead of having a multitude of independent objects (images, text area...), create groups and structure your objects in terms of interactivity, animation, and responsiveness. Group the elements that share a responsibility, the ones that move, resize, and respond together: the group keeps them consistent as a unit, instead of leaving each object to adapt on its own.

A Group is a container that includes one or more objects. "Child" objects are inside the group (there is a notion of depth) and their behavior also depends on its [Dynamic Size & Position](https://docs.pandasuite.com/essentials/layout/responsive-design/) parameters.

## Group several objects together

> **Info**
>
> 💡 Tip: To group several objects together, select these objects and press Cmd
>
> - G on Mac (or Control + G on Windows).

You can also add a group from the Components window.

To edit the contents of a group, double-click on the area or click on the arrow in the Objects list.

[Video: a selection box around four plant tiles, Cmd + G groups them, then the arrow in the Objects list opens the group and its four tiles]

## Ungroup objects

You can ungroup objects by typing Shift + Cmd + G on Mac or Shift + Control + G on Windows.

## Resize a Group

By default, the group does not resize its content. If you resize the Group, you need to manually resize the items inside.

You can activate the option to automatically resize content: click the **Auto Layout Children** icon, in the **Properties** panel (**Layout** section, **Responsive** row), next to the Dynamic Size & Position icon. Resizing is based on the [Dynamic Size & Position](https://docs.pandasuite.com/essentials/layout/responsive-design/) of the objects inside the Group.

[Image: Properties of a quiz Group: in the Responsive row, the Auto Layout Children icon, next to Dynamic Size & Position, is framed]

## Animate & Crop the content of a Group

One of the advantages of the Group is to hide (crop) its content. This allows you to create appearance effects using a [multi-state component](https://docs.pandasuite.com/essentials/components/multi-state/).

To hide a group, insert the content, exit the group and use the handles to reduce the size of the group.

To make a drop-down menu, create a first state where the group is shrunk (to 0, or down to its button as below) and in the second state resize the group. Change state when you click on the button.

[Video: in a Multi-state, the menu group shows only its All gardens button in state 1 “closed”, and the four gardens in state 2 “open”]

[Video: a click on the arrow of the Une qualité de vie button unfolds a four-item menu on a map, then another click folds it back]