# LayoutGroupComponent

Class · extends [`Component`](https://api.playcanvas.com/engine/classes/Component.md) · category: User Interface

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/framework/components/layout-group/component.js#L57

The LayoutGroupComponent enables an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) to position and scale its child
[ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md)s according to configurable layout rules. It supports horizontal and
vertical orientations and a variety of alignment, spacing, wrapping and sizing options.

You should never need to use the LayoutGroupComponent constructor directly. To add a
LayoutGroupComponent to an [Entity](https://api.playcanvas.com/engine/classes/Entity.md), use [Entity#addComponent](https://api.playcanvas.com/engine/classes/Entity.md#addcomponent):

```javascript
const entity = new Entity();
entity.addComponent('element', {
    type: ELEMENTTYPE_GROUP
});
entity.addComponent('layoutgroup', {
    orientation: ORIENTATION_HORIZONTAL,
    spacing: new Vec2(10, 0)
});
```

Once the LayoutGroupComponent is added to the entity, you can access it via the
[Entity#layoutgroup](https://api.playcanvas.com/engine/classes/Entity.md#layoutgroup) property:

```javascript
entity.layoutgroup.spacing = new Vec2(20, 0); // Increase spacing between children

console.log(entity.layoutgroup.spacing);         // Get the spacing and print it
```

Relevant Engine API examples:

- [Layout Group](https://playcanvas.github.io/#/user-interface/layout-group)

## Accessors

### alignment

```ts
get alignment(): Vec2
set alignment(value: Vec2)
```

Gets the horizontal and vertical alignment of child elements.

### heightFitting

```ts
get heightFitting(): number
set heightFitting(value: number)
```

Gets the height fitting mode to be applied when positioning and scaling child elements.

### orientation

```ts
get orientation(): number
set orientation(value: number)
```

Gets whether the layout should run horizontally or vertically.

### padding

```ts
get padding(): Vec4
set padding(value: Vec4)
```

Gets the padding to be applied inside the container before positioning any children.

### reverseX

```ts
get reverseX(): boolean
set reverseX(value: boolean)
```

Gets whether to reverse the order of children along the x axis.

### reverseY

```ts
get reverseY(): boolean
set reverseY(value: boolean)
```

Gets whether to reverse the order of children along the y axis.

### spacing

```ts
get spacing(): Vec2
set spacing(value: Vec2)
```

Gets the spacing to be applied between each child element.

### widthFitting

```ts
get widthFitting(): number
set widthFitting(value: number)
```

Gets the width fitting mode to be applied when positioning and scaling child elements.

### wrap

```ts
get wrap(): boolean
set wrap(value: boolean)
```

Gets whether or not to wrap children onto a new row/column when the size of the container is
exceeded.

## Inherited from [Component](https://api.playcanvas.com/engine/classes/Component.md)

- `entity: Entity`
- `system: ComponentSystem`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`