# Adaptive layout for children inside Container

**URL:** <https://phaser.discourse.group/t/adaptive-layout-for-children-inside-container/13685>\
**Category:** Phaser 3\
**Created:** [October 31, 2023, 6:25pm UTC](https://phaser.discourse.group/t/adaptive-layout-for-children-inside-container/13685 "2023-10-31T18:25:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [October 31, 2023, 6:25pm UTC](https://phaser.discourse.group/t/adaptive-layout-for-children-inside-container/13685/1 "2023-10-31T18:25:42Z")

</div>

Hello! I was wondering if there was already a method built-in to display the gameObjects inside a container.

For example :

**adaptiveWidth** : Set the width of the container according to the width of all children gameObject accumuled

**adaptiveHeight** : Set the height of the container according to the height of all children gameObject accumuled

**alignLeft** : Align all children gameObject to the left

**alignCenter** : Align all children gameObject to the center

**alignRight** : Align all children gameObject to the right

**jusityContent** : Justify all children gameObject

**wrapContent** : if the children gameObject should be wrap

**gridLayout** : set the child gameObject according to a grid

[…]

I was looking at the methods inside the **Phaser.GameObjects.Container** and I did not found any. Is there already a class inside the Phaser Library that could help achieve this or I will have to make custom methods to achieve that?

Thanks!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 2, 2023, 4:26pm UTC](https://phaser.discourse.group/t/adaptive-layout-for-children-inside-container/13685/2 "2023-11-02T16:26:20Z")

</div>

You can do

```js
const { width, height } = container.getBounds();

container.setSize(width, height);

```

And then use

- [Align.In methods](https://newdocs.phaser.io/docs/3.60.0/Phaser.Display.Align.In)
- [Actions.GridAlign()](https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Actions.GridAlign)
- [Actions.Spread()](https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Actions.Spread)