Row Layout

Define layout rules for items in a group

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

Row layout is only available for groups.

The following shows setting some group layout options

Select a group and set the Group layout to Row.

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

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.

Set the alignment to override the group layout alignment.

You may want to remove the group width or height. Using the -height, -width in the additional styles field of the group.

Items are ordered by their order in the layers panel not how they are aligned visually.

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.

How to set a Row Layout

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

Set the spacing in the Group Item spacing field

Set the vertical alignment in the items alignment field

Set the item wrap behavior

Individual items in the group can have their own alignment.

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

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

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.

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.

By default the column alignment button is available.

Layout Group Button

Before:

After:

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.

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

flex-direction - CSS: Cascading Style Sheets | MDN

Aligning Items in a Flex Container - CSS: Cascading Style Sheets | MDN

HTML - MDN Web Docs Glossary: Definitions of Web-related terms | MDN