> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/~/revisions/heUC4IdcyyXSz2lCbI8z/components/layout-and-positioning.md).

# Layout & Positioning

{% hint style="info" %}
As of version 1.18, all Size and Position components have been placed into a **Layout & Positioning** section in all component properties, along with the addition of two alignment properties - **Horizontal Alignment** and **Vertical Alignment**
{% endhint %}

### Finding the properties

<figure><img src="/files/ym75MnniVLMCSKmBoDGy" alt="" width="281"><figcaption></figcaption></figure>

All **Layout & Positioning** properties can be found in the top section of **any components'** properties panel.

### XY Positions

The **XY positioning** of a component is determined by the component's top left corner of its bounding box.

<figure><img src="/files/9V4KBtU16VaGQCSYQ2ij" alt="" width="563"><figcaption></figcaption></figure>

These properties will shift the components along their respective X and Y axes. Any change to the **X Position** will move the component left and right; any changes to the **Y Position** will move the component up and down.&#x20;

If a component is dragged along the canvas, then the values in the inputs will live update to display their new position.

<figure><img src="/files/5rL9CyViVOo1xR6xEDss" alt="" width="563"><figcaption></figcaption></figure>

### Alignment

A new property added in 1.18, **Alignment** allows components to have fixed alignments to points on the canvas, both **Vertically** and **Horizontally**.

#### Horizontal Alignment

<figure><img src="/files/0BZCPgU4csqWWMDFzB5P" alt=""><figcaption></figcaption></figure>

**Horizontal Alignment** sets components to have a fixed position on the canvas. This can be:

* Left - fixes the position to the left side of the canvas
* Center - fixes the position to the center of the canvas
* Right - fixes the position to the right of the canvas
* Stretch - stretches the width of the component to fit the canvas width

{% hint style="info" %}
Once **Horizontal Alignment** has been set, components cannot be dragged/ moved left or right along the canvas, and will only move up or down.
{% endhint %}

#### Vertical Alignment

<figure><img src="/files/G2nxqHr6lBWQcGDtJGCx" alt=""><figcaption></figcaption></figure>

**Vertical Alignment** sets components to have a fixed position on the vertical axis of the canvas. This can be:

* Top - fixes the position to the top of the canvas
* Middle - fixes the position to the middle of the canvas
* Bottom - fixes the position to the bottom of the canvas
* Stretch - stretches the height of the component to fit in the canvas height

{% hint style="info" %}
Once **Vertical Alignment** has been set, components cannot be dragged/ moved up or down along the canvas, and will only move left or right.
{% endhint %}

A graphic will appear beside the alignment properties, once an alignment has been selected, to indicate the current behavior of the selected component.

<figure><img src="/files/wm4cOUFrg18KsjUWQLbo" alt=""><figcaption></figcaption></figure>

#### Multi-alignment

When applying multiple alignments to components, a graphic will appear beside the properties to indicate the current alignment set.

<figure><img src="/files/oxqtCTZPLqWUIzrUbdV9" alt=""><figcaption><p>In this example, the <em>Text Label 1</em> component is aligned to the left side of the canvas, and its vertical alignment is stretched to fit the height.</p></figcaption></figure>

{% hint style="info" %}
A brief description appears at the bottom of the alignment properties, explaining the current settings for the component alignment.
{% endhint %}