---
description: Define layout rules for items in a group
---

# Row Layout

Row layout allows you to layout items in a row or column. It is based on flex box layout.&#x20;

Row layout is only available for groups.&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq130NXBT66ONH60Up%2Fimage.png?alt=media\&token=a69e06a5-2395-4cb9-8ce5-e0b1aaf0f5b5)

The following shows setting some group layout options

{% embed url="https://youtu.be/6MHiLjKDVRw" %}

Select a group and set the Group layout to Row.

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq130NXBT66ONH60Up%2Fimage.png?alt=media\&token=a69e06a5-2395-4cb9-8ce5-e0b1aaf0f5b5)

With a row layout you can set the vertical alignment, the item spacing and the layout of individual items.&#x20;

{% hint style="info" %}
Items in the group can have their own alignment. If an item is in a row or column layout group an additional self-alignment field is available.
{% endhint %}

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq4n71Wgz8grHig5pR%2Fimage.png?alt=media\&token=fa1e8474-e33e-4f63-bbb0-0d73efddfed3)

Set the alignment to override the group layout alignment.

{% hint style="info" %}
You may want to remove the group width or height. Using the -height, -width in the [additional styles](untitled) field of the group.&#x20;
{% endhint %}

{% hint style="info" %}
Items are ordered by their order in the layers panel not how they are aligned visually.
{% endhint %}

Use the row layout (reverse) option to reverse the order of items.

Set the items alignment to top, middle, bottom or baseline to set their vertical alignment.&#x20;

#### How to set a Row Layout

In the Group layout field select Row or Row (reverse)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq1bLqGtXjmQEGo8JE%2Fimage.png?alt=media\&token=3e802bf5-b7cd-4397-8bdd-ec00383896ec)

Set the spacing in the Group Item spacing field

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq1na9sCJDebtY_6Xm%2Fimage.png?alt=media\&token=12407b6b-4096-4f42-a47f-eec124d7bb43)

Set the vertical alignment in the items alignment field

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq2GCLawE9W65VsQJa%2Fimage.png?alt=media\&token=52ece49b-6041-44eb-aa94-c6b0959096b9)

Set the item wrap behavior

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq2NGNRCTB2KOjLq3-%2Fimage.png?alt=media\&token=fb327032-8a4b-40cf-8053-0f0513887326)

Individual items in the group can have their own alignment.&#x20;

Select the item in the layout group and set the Item Alignment option

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq31e02at-HiwDmpM3%2Fimage.png?alt=media\&token=80ae8336-0d7f-49bd-aeab-355d75d5a5f6)

The self alignment button has a lot of layout options. See the linked video for some examples.&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Lsx-Yg4bXiGqjoEra3i%2F-Lsx0YKUX-LPvywllI0O%2Fimage.png?alt=media\&token=365f6248-e849-4ee3-9fc8-b48279112442)

{% hint style="info" %}
Use two of the items to size the width and height of the group or use a rectangle for sizing and set the rectangle to [Background](background).&#x20;
{% endhint %}

#### Layout Group Button

The Layout Group button applies the selected formatting of the group that you have selected. It will distribute the items in the layout group according to the layout rules you've selected directly on the artboard. This alignment happens in Adobe XD and is close but not the same as the alignment in the browser.&#x20;

By default the column alignment button is available.&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq4HUGmt3s1KD73ejx%2Fimage.png?alt=media\&token=c64f7183-1b9b-4113-9702-508f65a12624)

![Layout Group Button](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq41t4uueSKML0WCJK%2Fimage.png?alt=media\&token=163f5976-3ee8-4073-aa45-456e51a6e2ff)

Before:&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq3v-vbvI7j9fR184l%2Fimage.png?alt=media\&token=c0bf8da6-57d8-4974-9890-c7919283ef69)

After:

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq49PNvQ1a91Wc6gCy%2Fimage.png?alt=media\&token=562fb5fd-648a-44c3-956d-86bdb0f968a3)

To set a row layout group select a group with items in it. Optionally move the group items to manually size the group or set the size in the width or height fields.&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Loq0fm74WVRx6NjX3w0%2F-Loq1P5tM9tZB2w3wMyu%2Fimage.png?alt=media\&token=63b424a9-b09e-442b-9eb3-93153b8ea28b)



{% embed url="https://developer.mozilla.org/en-US/docs/Glossary/Flexbox" %}

{% embed url="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" %}

{% embed url="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container" %}

{% embed url="https://developer.mozilla.org/en-US/docs/Glossary/HTML" %}

